/*
  应用管理详细页面
 */
<template>
    <div class="app-container">
        <el-row class="wrapper create">
            <el-col :span="24" class="warp-main">
                <div class="el-bar">
                    <p style="margin-bottom:10px;">
                        <i class="iconfont icon-users"></i>应用管理
                        <button class="iconfont icon-chehui chart-more" type="info" size="medium" @click="back">返回</button>
                    </p>
                    <div class="header">
                        <span class="icon_manage"></span>
                        <span class="apply_manage">
                            <ul>
                                <li>应用名:
                                    <span>{{appManageBean.appName}}</span>
                                    <span>镜像:{{ appManageBean.imageName + ':' + appManageBean.imageVersion}}</span>
                                </li>
                                <li>状态 :
                                    <span>{{appManageBean.status}}</span>
                                </li>
                                <li>实例 :
                                    <span>{{appManageBean.replicas}}</span>
                                </li>
                                <li class="drop">基本操作 :
                                    <!-- 按钮组 -->
                                    <el-button-group style="margin-right:10px;">
                                        <el-button plain class="iconfont icon-xitongbushu" size="small" :disabled="isDisabledReDeployButton" @click="reDeployApp">重新部署</el-button>
                                        <el-button plain class="el-icon-delete" size="small" :disabled="isDisabledDeleteAppButton" @click="deleteApp">删除应用</el-button>
                                        <el-button plain class="iconfont el-icon-circle-plus-outline" size="small" :disabled="isDisabledHorizontalScalingButton" @click="openScaleAppDialog">水平伸缩</el-button>
                                        <el-button plain class="iconfont icon-tanxingshensuo" v-show="appManageBean.appKind == 'Deployment' ? true : false" size="small" :disabled="isDisabledAutoScalingButton" @click="openAutoScaleAppDialog">自动伸缩</el-button>
                                        <el-button plain class="iconfont icon-banbenshengji" v-show="appManageBean.appKind == 'Deployment' ? true : false" size="small" :disabled="isDisabledGrayUpdateButton" @click="openGrayUpdateAppDialog">灰度升级</el-button>
                                        <!-- <el-button  plain class="iconfont icon-peizhiguanli" size="small" v-show="appManageBean.appKind == 'Deployment' ? true : false" @click="openConfigMapManageDialog">配置管理</el-button>
                                                                                                                                                                <el-button  plain class="el-icon-share" size="small"  @click="openServiceDailog">服务管理</el-button> -->
                                    </el-button-group>
                                </li>
                                <!-- <li class="serviceAdress"> 服务地址:
                                                                                                                                                                <ul>
                                                                                                                                                                    <li v-for="item in appManageBean.appServiceAddressList" :key="item.id">
                                                                                                                                                                        <el-tag size="small"  >{{item.name}}</el-tag>
                                                                                                                                                                    </li>
                                                                                                                                                                </ul>
                                                                                                                                                            </li> -->
                            </ul>
                        </span>
                        <span class="manage_time">
                            <ul>
                                <li>创建 :
                                    <span>{{appManageBean.createTime}}</span>
                                </li>
                                <li>更新 :
                                    <span>{{appManageBean.lastUpdateTime}}</span>
                                </li>
                            </ul>
                        </span>
                        <div class="manage_form">
                            <el-form :model="appManageBean">
                                <el-form-item label="描述" prop="described">
                                    <el-input v-model="appManageBean.described" :disabled="disabledAppDescribedArea" type="textarea"></el-input>
                                </el-form-item>
                                <el-form-item class="edit">
                                    <el-button icon="el-icon-edit" style="color:#999;" size="mini" v-show="showDescribedEditButton" @click="openAppDescridedArea">编辑</el-button>
                                </el-form-item>
                                <el-form-item class="btn">
                                    <el-button class="iconfont icon-fanhui" size="mini" v-show="showDescribedCancelButton" @click="closeAppDescridedArea">取消</el-button>
                                    <el-button class="iconfont icon-fuxuan" type="primary" v-show="showDescribedSureButton" @click="editAppDescribed" size="mini">确定</el-button>
                                </el-form-item>
                            </el-form>
                        </div>

                        <!--水平伸缩应用弹框界面.start-->
                        <el-dialog title="手动水平伸缩" width="60%" :visible.sync="scaleAppFormVisible" :close-on-click-modal="false">
                            <el-form ref="scaliAppForm" :model="scaliAppForm" label-width="120px">
                                <el-form-item label="服务名称" prop="appName">
                                    <el-input :disabled="true" v-model="scaliAppForm.appName" placeholder="名称"></el-input>
                                </el-form-item>
                                <el-form-item label="实例数量" prop="replicas">
                                    <el-tooltip class="item" effect="light" placement="top-start">
                                        <div slot="content">默认最大的实例数10个</div>
                                        <i class='el-icon-question'></i>
                                    </el-tooltip>
                                    <el-slider v-model="scaliAppForm.replicas" :max="10" :show-stops="true" show-input>
                                    </el-slider>
                                    <span class="num">个</span>
                                </el-form-item>
                                <el-form-item label="提示">
                                    <el-tag type="info">实例数量调整,系统保存后将调整实例数量到设置预期.(若自动伸缩开启,则无法手动扩展)</el-tag>
                                </el-form-item>
                                <div class="form-btn" style="text-align:right">
                                    <el-button class="iconfont icon-fanhui" @click.native="closeScaleAppDialog">取消</el-button>
                                    <el-button class="iconfont icon-fuxuan" type="primary" @click="horizontalScalingApp">确定</el-button>
                                </div>
                            </el-form>
                        </el-dialog>
                        <!--水平伸缩应用弹框界面.end-->

                        <!-- 自动弹性伸缩应用.start -->
                        <el-dialog title="自动弹性伸缩应用" width="80%" :visible.sync="autoScaleAppFormVisible" :close-on-click-modal="false">
                            <el-form ref="autoScaliAppForm" :model="autoScaliAppForm" label-width="120px">
                                <el-form-item label="开关" prop="isAutoScaleAppSwitch">
                                    <el-switch v-model="isAutoScaleAppSwitch" @change="changeAutoScaleSwitchState"> </el-switch>
                                </el-form-item>
                                <el-form-item label="服务名称" prop="appName">
                                    <el-input :disabled="true" v-model="autoScaliAppForm.appName" placeholder="名称"></el-input>
                                </el-form-item>
                                <el-form-item label="最小实例数量" prop="minReplicas">
                                    <el-slider v-model="autoScaliAppForm.minReplicas" :min="1" :max="9" :show-stops="true" @change="changeAppMinCountOnAutoScalue" show-input>
                                    </el-slider>
                                    <span class="num">个</span>
                                </el-form-item>
                                <el-form-item label="最大实例数量" prop="appMaxCount">
                                    <el-slider v-model="autoScaliAppForm.maxReplicas" :min="2" :max="10" :show-stops="true" @change="changeAppMaxCountOnAutoScalue" show-input>
                                    </el-slider>
                                    <span class="num">个</span>
                                </el-form-item>
                                <el-form-item label="CPU阈值" prop="appCupPercent">
                                    <el-slider v-model="autoScaliAppForm.targetCpuPercent" :min="1" :max="100" show-input>
                                    </el-slider>
                                    <span class="num">%</span>
                                </el-form-item>
                                <el-form-item label="提示">
                                    <el-tag type="info">系统将根据设定的CPU阈值来自动的『扩展,或减少』该服务所『缺少,或冗余』的实例数量</el-tag>
                                </el-form-item>
                                <div class="form-btn" style="text-align:right">
                                    <el-button class="iconfont icon-fanhui" @click.native="closeAutoScaleAppDialog">取消</el-button>
                                    <el-button class="iconfont icon-fuxuan" type="primary" :disabled="isDisabledUpdateAutoScaleButton" @click="autoScalingApp">确定</el-button>
                                </div>
                            </el-form>
                        </el-dialog>
                        <!-- 自动弹性伸缩应用.end -->

                        <!-- 灰度升级.start -->
                        <el-dialog title="灰度升级" width="60%" :visible.sync="grayUpdateAppFormVisible" :close-on-click-modal="false">
                            <!-- 表单.start -->
                            <el-form ref="grayUpdateAppForm" :model="grayUpdateAppForm" label-width="120px">
                                <el-form-item label="应用名称" prop="appName">
                                    <el-input :disabled="true" v-model="grayUpdateAppForm.appName" placeholder="名称"></el-input>
                                </el-form-item>
                                <el-form-item label="当前镜像名称" prop="imageName">
                                    <el-input :disabled="true" v-model="grayUpdateAppForm.imageName" placeholder="名称"></el-input>
                                </el-form-item>
                                <el-form-item label="当前镜像版本" prop="imageVersion">
                                    <el-input :disabled="true" v-model="grayUpdateAppForm.imageVersion" placeholder="名称"></el-input>
                                </el-form-item>
                                <el-form-item label="目标镜像版本" prop="targetImageVersion">
                                    <el-select style="width:500px" v-model="grayUpdateAppForm.targetImageVersion" placeholder="请选择目标镜像版本">
                                        <el-option v-for="item in imageVersionArr" :key="item.name" :label="'版本:'+item.name+'  镜像创建时间:'+item.created" :value="item.name">
                                        </el-option>
                                    </el-select>
                                </el-form-item>

                                <!-- <el-form-item label="提示">
                                                                                                                                                                    <el-tag type="info">实例数量调整,系统保存后将调整实例数量到设置预期.(若自动伸缩开启,则无法手动扩展)</el-tag>
                                                                                                                                                                </el-form-item> -->
                                <div class="form-btn" style="text-align:right">
                                    <el-button class="iconfont icon-fanhui" @click.native="closeGrayUpdateAppDialog">取消</el-button>
                                    <el-button class="iconfont icon-fuxuan" type="primary" @click="grayUpdateApp">确定</el-button>
                                </div>
                            </el-form>
                        </el-dialog>
                        <!-- 灰度升级.end -->

                        <!-- 配置管理.start -->
                        <el-dialog title="服务配置管理" width="70%" :visible.sync="configMapManageDialogVisible" :close-on-click-modal="false">
                            <!-- 数据table.start -->
                            <el-table height="100" v-loading="loadingConfigMapManageDataTable" :data="configMapManageData" @row-click="configMapManageDataTableRowClick" highlight-current-row border style="width: 100%;margin-top:10px;">
                                <el-table-column prop="mouthPath" label="挂载目录">
                                </el-table-column>
                                <el-table-column prop="configGroup" label="配置组">
                                </el-table-column>
                                <el-table-column prop="configFilesStr" :show-overflow-tooltip="true" label="配置文件">
                                </el-table-column>
                            </el-table>
                            <!-- 表单.start -->
                            <el-form status-icon ref="configMapManageForm" :model="configMapManageForm" :rules="configMapManageFormRules" label-width="120px">
                                <el-form-item label="挂载目录" prop="mouthPath">
                                    <el-input :disabled="disabledConfigManagePathInput" v-model="configMapManageForm.mouthPath" placeholder="目录"></el-input>
                                </el-form-item>
                                <el-form-item label="配置组" prop="configGroup">
                                    <el-select v-model="configMapManageForm.configGroup" @change="changeConfigGroupValue" placeholder="配置组">
                                        <el-option v-for="item in configMapArr" :key="item" :label="item" :value="item">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="配置文件" prop="configFiles">
                                    <el-select v-model="configMapManageForm.configFiles" collapse-tags multiple placeholder="配置文件">
                                        <el-option v-for="item in configFilesArr" :key="item" :label="item" :value="item">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="提示">
                                    <el-tag type="info">新增,保存,删除,操作成功,应用会自动重新部署</el-tag>
                                </el-form-item>

                                <div class="form-btn" style="text-align:right">
                                    <el-button class="iconfont icon-tianjia" type="primary" @click="addConfigMapToApp">新增</el-button>
                                    <el-button class="iconfont icon-baocun" type="success" :disabled="disabledConfigManageSaveButton" @click="handleConfigManage">保存</el-button>
                                    <el-button icon="el-icon-delete" type="danger" :disabled="disabledConfigManageDeleteButton" @click="deleteConfigMapToApp">删除</el-button>
                                    <el-button class="iconfont icon-fanhui" type="info" @click="closeConfigManageDailog">取消</el-button>
                                </div>
                            </el-form>
                        </el-dialog>
                        <!-- 配置管理.end -->

                        <!-- 服务配置.start -->
                        <el-dialog title="服务配置管理" width="90%" :visible.sync="serviceDialogVisible" :close-on-click-modal="false">
                            <!-- 数据table.start -->
                            <el-table height="250" stripe v-loading="loadingServiceDataTable" :data="serviceData" highlight-current-row border style="width: 100%;">
                                <el-table-column prop="serviceName" :show-overflow-tooltip="true" label="服务名称">
                                </el-table-column>
                                <el-table-column prop="port" label="服务端口" width="100">
                                </el-table-column>
                                <el-table-column prop="protocol" :show-overflow-tooltip="true" label="服务协议" width="100">
                                </el-table-column>
                                <el-table-column label="外部访问" width="100">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.visible == true ? '是' : '否' }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="映射端口">
                                    <template slot-scope="scope">
                                        <template v-if="scope.row.edit && scope.row.visible && scope.row.protocol == 'TCP'">
                                            <el-input class="TCP" size="small" v-model="scope.row.nodePort" :min="5000" :max="32767" :maxlength="5"></el-input>
                                            <el-button class='cancel-btn' size="small" icon="el-icon-refresh" @click="cancelEditServiceNodePort(scope.row)" type="warning">取消</el-button>
                                        </template>
                                        <span v-else>{{ scope.row.nodePort > 0 ? scope.row.nodePort : '' }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="domainName" label="映射域名">
                                    <template slot-scope="scope">
                                        <template v-if="scope.row.edit && scope.row.visible && scope.row.protocol == 'HTTP'">
                                            <el-input class="HTTP" size="mini" v-model="scope.row.domainName"></el-input>
                                            <el-button class='cancel-btn' size="mini" icon="el-icon-refresh" @click="cancelEditServiceDomainName(scope.row)" type="warning">取消</el-button>
                                        </template>
                                        <span v-else>{{ scope.row.domainName}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="createTime" label="创建时间">
                                </el-table-column>
                                <el-table-column prop="tip" label="操作">
                                    <template slot-scope="scope">
                                        <!-- 保存 -->
                                        <el-button v-if="scope.row.edit && scope.row.visible" type="success" @click="confirmServiceEdit(scope.row)" size="small" icon="el-icon-circle-check-outline">保存</el-button>
                                        <!-- 修改 -->
                                        <el-button v-else-if="scope.row.visible" type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit">修改</el-button>
                                        <!-- 删除按钮 -->
                                        <el-button icon="el-icon-delete" type="danger" size="small" @click="deleteService(scope.$index, scope.row)">删除</el-button>

                                    </template>
                                </el-table-column>
                            </el-table>
                            <!-- 数据table.end -->

                            <!-- 表单.start -->
                            <el-form :inline="true" status-icon ref="serviceForm" :model="serviceForm" :rules="serviceFormRules" label-width="120px" style="margin-top:20px;">
                                <el-form-item label="服务名称" prop="serviceNameType">
                                    <el-select size="mini" @change="changeServiceNameType" v-model="serviceForm.serviceNameType" placeholder="动态生成" :disabled="disabledServiceNameType" style="width:200px;">
                                        <el-option label="动态生成" value="dynamic"></el-option>
                                        <el-option label="指定服务名" value="appoint"></el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="指定服务名" prop="serviceName">
                                    <el-input style="width:180px;" :disabled="disabledServiceName" size="mini" v-model="serviceForm.serviceName" controls-position="right"></el-input>
                                    <el-tooltip class="item" effect="light" content="指定的服务名称要符合: 以[a~z]开头，允许[0~9]、[-]，长度大于4，且以小写英文或数字结尾" placement="top">
                                        <i class="el-icon-question"></i>
                                    </el-tooltip>
                                </el-form-item>

                                <el-form-item label="服务端口" prop="port">
                                    <el-select style="width:180px;" size="mini" :disabled="disabledServicePort" v-model="serviceForm.port" placeholder="服务端口">
                                        <el-option v-for="item in appServicePortArr" :key="item" :label="item" :value="item">
                                        </el-option>
                                    </el-select>
                                    <el-tooltip class="item" effect="light" content="此选项为应用容器内部绑定的端口,是虚拟端口,此组端口只能在k8s内部通过: 服务名称:端口,这个方式访问" placement="top">
                                        <i class="el-icon-question"></i>
                                    </el-tooltip>
                                </el-form-item>

                                <div style="display:block;">
                                    <el-form-item label="对外访问" prop="visible">
                                        <el-switch @change="changeServiceVisible" v-model="serviceForm.visible" active-text="" inactive-text="" style="width:180px;"></el-switch>
                                        <el-tooltip class="item" effect="light" content="1:应用提供的服务只供k8s内部使用,此按钮选择关闭,不管服务是走TCP协议还是HTTP协议,k8s内部访问该服务的方式为: 服务名称:服务端口(如:netty-service-in:8080 );
                                                                                                                                                                                    2:应用提供的服务供k8s集群外部使用,请打开此按钮" placement="top">
                                            <i class="el-icon-question"></i>
                                        </el-tooltip>
                                    </el-form-item>

                                    <el-form-item label="服务协议" prop="protocol">
                                        <el-select size="mini" :disabled="disabledServiceProtocol" @change="changeServiceProtocol" v-model="serviceForm.protocol" placeholder="HTTP" style="width:180px;">
                                            <el-option label="HTTP" value="http"></el-option>
                                            <el-option label="TCP" value="tcp"></el-option>
                                        </el-select>
                                        <el-tooltip class="item" effect="light" content="应用容器的对外服务的端口协议" placement="top">
                                            <i class="el-icon-question"></i>
                                        </el-tooltip>
                                    </el-form-item>
                                </div>

                                <div style="display:block;">
                                    <el-form-item label="映射端口" prop="portType">
                                        <el-select size="mini" @change="changeServicePortType" v-model="serviceForm.portType" placeholder="动态生成" :disabled="disabledServicePortType" style="width:180px;">
                                            <el-option label="动态生成" value="dynamic"></el-option>
                                            <el-option label="指定端口" value="appoint"></el-option>
                                        </el-select>
                                        <el-tooltip class="item" effect="light" content="1:当对外访问按钮打开,且服务端口协议为:TCP,k8s会将容器绑定的服务端口映射到集群的物理主机上,映射到物理主机上的端口范围是:5000-32767.2:选择: 动态生成,k8s会随机映射一个物理主机端口.3:选择: 指定端口,k8s将该端口映射到物理主机上" placement="top">
                                            <i class="el-icon-question"></i>
                                        </el-tooltip>
                                    </el-form-item>

                                    <el-form-item label="指定端口" prop="nodePort">
                                        <el-input style="width:180px;" :disabled="disabledServiceNodePort" size="mini" v-model="serviceForm.nodePort" controls-position="right" :min="5000" :max="32767" :maxlength="6"></el-input>
                                        <el-tooltip class="item" effect="light" content="当应用容器的对外服务端口协议为:TCP,且,映射端口选择:指定端口,请输入指定的端口," placement="top">
                                            <i class="el-icon-question"></i>
                                        </el-tooltip>
                                    </el-form-item>
                                </div>

                                <div style="display:block;">
                                    <el-form-item label="映射域名" prop="domainNameType">
                                        <el-select style="width:180px;" size="mini" @change="changeServiceDomainNameType" v-model="serviceForm.domainNameType" placeholder="动态生成" :disabled="disabledServiceDomainNameType">
                                            <el-option label="动态生成" value="dynamic"></el-option>
                                            <el-option label="指定域名" value="appoint"></el-option>
                                        </el-select>
                                        <el-tooltip class="item" effect="light" content="当对外访问按钮打开,且服务端口协议为:HTTP,k8s会将容器绑定的服务端口对应的服务接口映射成域名,映射的域名通配是:*.venus.me;当选择: 动态生成,k8s会随机生成一个域名;选择: 指定域名,k8s将该域名映射到容器的服务端口上" placement="top">
                                            <i class="el-icon-question"></i>
                                        </el-tooltip>
                                    </el-form-item>

                                    <el-form-item label="指定域名" prop="domainName">
                                        <el-input style="width:180px;" :disabled="disabledServiceDomainName" size="mini" v-model="serviceForm.domainName" controls-position="right" :maxlength="120"></el-input>
                                        <el-tooltip class="item" effect="light" content="当应用容器的对外服务端口协议为:HTTP,且,映射域名选择:指定域名,请输入指定的域名," placement="top">
                                            <i class="el-icon-question"></i>
                                        </el-tooltip>
                                    </el-form-item>
                                </div>
                                <el-form-item label="温馨提示" prop="tip">
                                    <!-- <el-tag type="info">1:应用容器的服务端口不提供对外访问,只需要选择对应的服务端口,新建就行了,创建完后的访问方式: 服务名称:服务端口</el-tag>
                                                                                                                                                                    <el-tag type="info">2:应用容器的服务端口提供对外访问,且服务协议为: TCP,创建完后的访问方式: k8s集群物理主机IP:映射端口</el-tag>
                                                                                                                                                                    <el-tag type="info">3:应用容器的服务端口提供对外访问,且服务协议为: HTPP,创建完后的访问方式: 直接通过映射的域名访问</el-tag> -->
                                    <el-alert title="1:应用容器的服务端口不提供对外访问,只需要选择对应的服务端口,新建就行了,创建完后的访问方式: 服务名称:服务端口" type="info" :closable="false" show-icon></el-alert>
                                    <el-alert title="2:应用容器的服务端口提供对外访问,且服务协议为: TCP,创建完后的访问方式: k8s集群节点物理主机IP:映射端口" type="info" :closable="false" show-icon></el-alert>
                                    <el-alert title="3:应用容器的服务端口提供对外访问,且服务协议为: HTTP,创建完后的访问方式: 直接通过映射的域名访问" type="info" :closable="false" show-icon></el-alert>
                                </el-form-item>

                                <div class="form-btn" style="text-align:right">
                                    <el-button class="iconfont icon-tianjia" type="primary" @click="addService">新增</el-button>
                                    <el-button class="iconfont icon-baocun" type="success" :disabled="disabledServiceSaveButton" @click="saveService">保存</el-button>
                                    <el-button class="iconfont icon-fanhui" type="info" @click="serviceDialogVisible = false">取消</el-button>
                                </div>
                            </el-form>
                            <!-- 表单.end -->

                        </el-dialog>
                        <!-- 服务配置.end -->

                    </div>

                    <!--tab栏的切换-->
                    <div class="tabs">
                        <el-tabs v-model="activeName2" type="card" @tab-click="tabPaneClick">
                            <!-- 基本信息.start -->
                            <el-tab-pane label="基本信息" name="zero">
                                <!-- 基本信息 含资源配置,环境变量,启动设置 参考时速云服务明细页面-->
                                <el-collapse accordion>
                                    <el-collapse-item>
                                        <template slot="title">
                                            <div class="line"></div>
                                            <span class="Title">资源配置</span>
                                        </template>
                                        <!-- 以下资源配置查询 -->
                                        <el-form v-show="resourceConfigShowModal=='query'" :inline="true" style="margin-left:15px" label-position="left" label-width="120px">
                                            <el-form-item class="edit">
                                                <el-button icon="el-icon-edit" @click="resourceConfigShowModal='edit';setEditRequestMemory();setEditLimitsMemory();setEditRequestCpu();setEditLimitsCpu()" type="primary" size="mini">修改</el-button>
                                            </el-form-item>
                                        </el-form>
                                        <el-form v-show="resourceConfigShowModal=='query'" :inline="true" style="margin-left:15px" label-position="left" label-width="120px">
                                            <el-form-item label="内存请求值" />
                                            <el-form-item label="内存最大值" />
                                            <el-form-item label="cpu请求值" />
                                            <el-form-item label="cpu最大值" />
                                        </el-form>
                                        <el-form v-show="resourceConfigShowModal=='query'" :inline="true" style="margin-left:15px" label-position="left" label-width="120px">
                                            <el-form-item :label="appManageBean.requests.memory" />
                                            <el-form-item :label="appManageBean.limits.memory" />
                                            <el-form-item :label="appManageBean.requests.cpu" />
                                            <el-form-item :label="appManageBean.limits.cpu" />
                                        </el-form>
                                        <!-- 以下资源配置编辑 -->
                                        <el-form v-show="resourceConfigShowModal=='edit'" :inline="true" style="margin-left:15px" label-position="left" label-width="120px">
                                            <el-form-item class="edit">
                                                <el-button class="iconfont icon-fanhui" type="primary" size="mini" @click="resourceConfigShowModal='query'">取消</el-button>
                                                <el-button class="iconfont icon-fuxuan" type="primary" size="mini" @click="updateAppBaseInfo(0)">确定</el-button>
                                            </el-form-item>
                                        </el-form>
                                        <el-form v-show="resourceConfigShowModal=='edit'" style="margin-left:15px" label-position="left" label-width="120px">
                                            <el-form-item label="内存请求值">
                                                <el-radio-group v-model="EditRequestMemory">
                                                    <el-radio-button label="100Mi"></el-radio-button>
                                                    <el-radio-button label="128Mi"></el-radio-button>
                                                    <el-radio-button label="256Mi"></el-radio-button>
                                                    <el-radio-button label="512Mi"></el-radio-button>
                                                </el-radio-group>
                                            </el-form-item>
                                            <el-form-item label="内存最大值">
                                                <el-radio-group v-model="EditLimitsMemory">
                                                    <el-radio-button label="512Mi"></el-radio-button>
                                                    <el-radio-button label="1Gi"></el-radio-button>
                                                    <el-radio-button label="2Gi"></el-radio-button>
                                                    <el-radio-button label="4Gi"></el-radio-button>
                                                    <el-radio-button label="8Gi"></el-radio-button>
                                                </el-radio-group>
                                            </el-form-item>
                                            <el-form-item label="cpu请求值">
                                                <el-radio-group v-model="EditRequestCpu">
                                                    <el-radio-button label="100m"></el-radio-button>
                                                    <el-radio-button label="200m"></el-radio-button>
                                                    <el-radio-button label="300m"></el-radio-button>
                                                    <el-radio-button label="500m"></el-radio-button>
                                                </el-radio-group>
                                            </el-form-item>

                                            <el-form-item label="cpu最大值">
                                                <el-radio-group v-model="EditLimitsCpu">
                                                    <el-radio-button label="512m"></el-radio-button>
                                                    <el-radio-button label="1"></el-radio-button>
                                                    <el-radio-button label="2"></el-radio-button>
                                                    <el-radio-button label="3"></el-radio-button>
                                                </el-radio-group>
                                            </el-form-item>
                                        </el-form>
                                    </el-collapse-item>
                                    <el-collapse-item>
                                        <template slot="title">
                                            <div class="line"></div>
                                            <span class="Title">启动参数</span>
                                        </template>
                                        <!-- 以下启动参数查询 -->
                                        <el-form v-show="startParaShowModal=='query'" :inline="true" style="margin-left:15px" label-position="left" label-width="120px">
                                            <el-form-item class="edit">
                                                <el-button icon="el-icon-edit" @click="startParaShowModal='edit';setEditCommandStr();setEditArgsStr()" type="primary" size="mini">修改</el-button>
                                            </el-form-item>
                                        </el-form>
                                        <el-form v-show="startParaShowModal=='query'" :inline="true" style="margin-left:15px" label-position="left">
                                            <el-form-item label="命令:" />
                                            <el-form-item label="">
                                                <el-input v-html="commandStr" placeholder="启动命令" type="textarea" style="width:700px" :readonly="true"></el-input>
                                            </el-form-item>
                                        </el-form>
                                        <el-form v-show="startParaShowModal=='query'" :inline="true" style="margin-left:15px" label-position="left">
                                            <el-form-item label="参数:" />
                                            <el-form-item label="">
                                                <el-input v-html="argsStr" placeholder="启动参数" style="width:700px" type="textarea" :readonly="true" :rows="10"></el-input>
                                            </el-form-item>
                                        </el-form>
                                        <!-- 以下启动参数编辑 -->
                                        <el-form v-show="startParaShowModal=='edit'" :inline="true" style="margin-left:15px" label-position="left" label-width="120px">
                                            <el-form-item class="edit">
                                                <el-button class="iconfont icon-fanhui" type="primary" size="mini" @click="startParaShowModal='query'">取消</el-button>
                                                <el-button class="iconfont icon-fuxuan" type="primary" size="mini" @click="updateAppBaseInfo(1)">确定</el-button>
                                            </el-form-item>
                                        </el-form>
                                        <el-form v-show="startParaShowModal=='edit'" :inline="true" style="margin-left:15px" label-position="left">
                                            <el-form-item label="命令:" />
                                            <el-form-item label="">
                                                <el-tooltip class="item" effect="dark" content="多条命令用逗空格分开( )" placement="top-start">
                                                    <el-input v-model="EditCommandStr" placeholder="启动命令" type="textarea" style="width:700px"></el-input>
                                                </el-tooltip>
                                            </el-form-item>
                                        </el-form>
                                        <el-form v-show="startParaShowModal=='edit'" :inline="true" style="margin-left:15px" label-position="left">
                                            <el-form-item label="参数:" />
                                            <el-form-item label="">
                                                <el-tooltip class="item" effect="dark" content="多条参数用空格分开( )" placement="top-start">
                                                    <el-input v-model="EditArgsStr" placeholder="启动参数" style="width:700px" type="textarea" :rows="10"></el-input>
                                                </el-tooltip>
                                            </el-form-item>
                                        </el-form>

                                    </el-collapse-item>
                                    <el-collapse-item>
                                        <template slot="title">
                                            <div class="line"></div>
                                            <span class="Title">环境变量</span>
                                        </template>
                                        <!-- 以下环境变量查询 -->
                                        <el-form v-show="evnShowModal=='query'" :inline="true" style="margin-left:15px" label-position="left" label-width="120px">
                                            <el-form-item class="edit">
                                                <el-button icon="el-icon-edit" @click="evnShowModal='edit';setEditEnvs()" type="primary" size="mini">修改</el-button>
                                            </el-form-item>
                                        </el-form>
                                        <el-form v-show="evnShowModal=='query'" :inline="true" style="margin-left:15px" label-position="left" label-width="200px">
                                            <el-form-item label="key值" />
                                            <el-form-item label="value值" />
                                        </el-form>
                                        <el-form v-show="evnShowModal=='query'" v-for="(item, index) in appManageBean.envs" :key="item.key" :inline="true" style="margin-left:15px" label-position="left" label-width="200px">
                                            <el-form-item :label="item.name" />
                                            <el-form-item :label="item.value" label-width="500px" />
                                        </el-form>
                                        <!-- 以下环境变量编辑 -->
                                        <el-form v-show="evnShowModal=='edit'" :inline="true" style="margin-left:15px" label-position="left" label-width="120px">
                                            <el-form-item class="edit">
                                                <el-button class="iconfont icon-fanhui" type="primary" size="mini" @click="evnShowModal='query'">取消</el-button>
                                                <el-button class="iconfont icon-fuxuan" type="primary" size="mini" @click="updateAppBaseInfo(2)">确定</el-button>
                                            </el-form-item>
                                        </el-form>
                                        <el-form v-show="evnShowModal=='edit'" :inline="true" style="margin-left:15px" label-position="left" label-width="200px">
                                            <el-form-item label="key值" />
                                            <el-form-item label="value值" />
                                        </el-form>
                                        <el-form v-show="evnShowModal=='edit'" v-for="(item, index) in EditEnvs" :key="item.key" :inline="true" style="margin-left:15px" label-position="left" label-width="200px">
                                            <el-form-item label="">
                                                <el-input v-model="item.name" placeholder="key值"></el-input>
                                            </el-form-item>
                                            <el-form-item label="">
                                                <el-input style="width:500px" v-model="item.value" placeholder="value值"></el-input>
                                            </el-form-item>
                                            <el-form-item label="">
                                                <el-tooltip class="item" effect="dark" content="删除当前环境变量" placement="top-start">
                                                    <el-button @click="deleteAEnv(index)" type="danger">-</el-button>
                                                </el-tooltip>
                                            </el-form-item>
                                        </el-form>
                                        <el-form v-show="evnShowModal=='edit'" :inline="true" style="margin-left:15px" label-position="left" label-width="200px">
                                            <el-tooltip class="item" effect="dark" content="新增一个环境变量" placement="top-start">
                                                <el-button @click="addAEnv" type="primary">+</el-button>
                                            </el-tooltip>
                                        </el-form>

                                    </el-collapse-item>
                                </el-collapse>
                            </el-tab-pane>
                            <!-- 基本信息.end -->

                            <!-- 容器组.start -->
                            <el-tab-pane label="容器组" name="first">
                                <el-form :inline="true" class="demo-form-inline">
                                    <el-form-item>
                                        <el-button icon="el-icon-refresh" type="primary" size="small" @click="getPodList">刷新</el-button>
                                    </el-form-item>
                                    <el-form-item style="text-align:right">
                                        <p>
                                            <span>共
                                                <span>{{podTotal}}</span> 条</span>
                                        </p>
                                    </el-form-item>
                                </el-form>
                                <!-- 引入容器组.组件.start -->
                                <container-group :contrainerDataLis="contrainerDataLis" :reStartPod="reStartPod" :loadingTable="loadingContainerTable">
                                </container-group>
                                <!-- 引入容器组.组件.end -->
                            </el-tab-pane>
                            <!-- 容器组.end -->

                            <!-- 监控板块.start -->
                            <el-tab-pane label="监控" name="second">
                                <div class="echart-width">
                                    <pod-monitor :monitorObject="monitorObject" :memory_metrics="memory_metrics" :cpu_metrics="cpu_metrics" :net_in_metrics="net_in_metrics" :net_out_metrics="net_out_metrics" :namespaceName="monitorNamespace" :podNames="monitorPodNames" :autoFlush="false">
                                    </pod-monitor>
                                </div>
                            </el-tab-pane>
                            <!-- 监控板块.end -->

                            <!-- 日志板块.start -->
                            <el-tab-pane label="日志" name="third">
                                <!--应用日志组件.start-->
                                <appLog :namespaceName="monitorNamespace" :podNames="monitorPodNames">
                                </appLog>
                                <!--应用日志组件.end-->
                            </el-tab-pane>
                            <!-- 日志板块.end -->

                            <!-- 事件板块.start -->
                            <el-tab-pane label="事件" name="four">
                                <pod-events :podNames="monitorPodNames">
                                </pod-events>
                            </el-tab-pane>
                            <!-- 事件板块.end -->

                            <!-- 操作记录.start -->
                            <el-tab-pane label="操作记录" name="five">
                                <div>
                                    <!-- <appOperLog :appName="appManageBean.appName + '=' + appManageBean.imageName + ':' + appManageBean.imageVersion"></appOperLog> -->
                                    <appOperLog :appName="appManageBean.appName + '=' + appManageBean.imageName"></appOperLog>
                                </div>
                            </el-tab-pane>
                            <!-- 操作记录.end -->

                            <!-- 自动弹性伸缩板块.start -->
                            <el-tab-pane v-if="appManageBean.autoScale" label="自动伸缩监控" name="six">
                                <!-- <el-form :inline="true" class="demo-form-inline">
                                                                                                                                                                         <el-form-item>
                                                                                                                                                                            <el-button icon="el-icon-refresh" type="primary" size="small" @click="getAutoExtendData" >刷新</el-button>
                                                                                                                                                                        </el-form-item>
                                                                                                                                                                    </el-form> -->
                                <el-table v-loading="loadingAutoExtendDataTable" :data="autoExtendTableData" highlight-current-row border style="width: 100%;margin-top:10px;">
                                    <el-table-column prop="appNameKube" label="应用名称" align="center">
                                    </el-table-column>
                                    <el-table-column header-align="center" align="center" prop="currentCPUUtilizationPercentage" label="当前CPU使用率(%)">
                                    </el-table-column>
                                    <el-table-column header-align="center" align="center" prop="targetCPUUtilizationPercentage" label="目标CPU使用率(%)">
                                    </el-table-column>
                                    <el-table-column header-align="center" align="center" prop="currentReplicas" label="当前实例数(个)">
                                    </el-table-column>
                                    <el-table-column header-align="center" align="center" prop="minReplicas" label="目标最小实例数(个)">
                                    </el-table-column>
                                    <el-table-column header-align="center" align="center" prop="maxReplicas" label="目标最大实例数(个)">
                                    </el-table-column>

                                </el-table>
                            </el-tab-pane>
                            <!-- 自动弹性伸缩板块.end -->

                            <!-- 应用镜像版本明细.start -->
                            <el-tab-pane label="镜像版本明细" name="seven">
                                <el-table v-loading="loadingImageVersionDescribedDataTable" :data="imageVersionDescribedTableData" highlight-current-row border style="width: 100%;margin-top:10px;">
                                    <el-table-column :show-overflow-tooltip="true" prop="image" label="镜像">
                                    </el-table-column>
                                    <el-table-column prop="version" label="版本">
                                    </el-table-column>
                                    <el-table-column prop="user" label="维护者">
                                    </el-table-column>
                                    <el-table-column :show-overflow-tooltip="true" prop="described" label="描述">
                                    </el-table-column>
                                    <el-table-column prop="lastUpdateTime" label="最后更新时间">
                                    </el-table-column>
                                </el-table>
                            </el-tab-pane>
                            <!-- 应用镜像版本明细.end -->
                        </el-tabs>
                    </div>

                    <div class="step">
                        <el-button class="iconfont icon-chehui" type="primary" size="medium" @click="back">返回</el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import containerGroup from '@/components/appCenter/appManage/containerGroup'; // 容器组.组件
import { appManagement } from '@/utils/appManagement'; // 应用管理工具类
import podMonitor from '@/components/appCenter/appManage/podMonitor';
import appLog from '@/components/logCenter/appLog';
import appOperLog from '@/components/logCenter/appOperLog';
import podEvents from '@/components/appCenter/appManage/podEvents';
import { validateDomainName } from '@/utils/validate';

export default {
    // 引入的组件
    components: { containerGroup, podMonitor, appLog, podEvents, appOperLog },
    data() {
        // 服务配置校验.start
        // 校验目录
        const validateConfigMangePath = (rule, value, callback) => {
            if (typeof value == "undefined" || value == null) {
                callback(new Error("挂载目录不能为空"));
            } else if (value.length == 0) {
                callback(new Error("挂载目录不能为空"));
            } else {
                let reg = /(^\/([0-9a-zA-Z]+))+/;
                if (!reg.test(value)) {
                    callback(new Error("非法路径"));
                } else {
                    // 校验是否重复
                    const pathdata = this.configMapManageData;
                    const pns = [];
                    pathdata.forEach(function(element) {
                        if (element.mouthPath == value) {
                            pns.push(element.mouthPath);
                        }
                    }, this);
                    if (pns.length >= 1 && !this.disabledConfigManagePathInput) {
                        callback(new Error("新增挂载目录,重复,请重新输入"));
                    } else {
                        callback();
                    }
                }
            }
        };
        // 校验配置组
        const validateConfigMangeConfigMap = (rule, value, callback) => {
            if (typeof value == "undefined" || value == null) {
                callback(new Error("请选择配置组"));
            } else if (value.length == 0) {
                callback(new Error("请选择配置组"));
            } else {
                callback();
            }
        };
        // 校验配置文件
        const validateConfigMangeConfigFiles = (rule, value, callback) => {
            if (typeof value == "undefined" || value == null) {
                callback(new Error("请选择配置文件"));
            } else if (value.length == 0) {
                callback(new Error("请选择配置文件"));
            } else {
                callback();
            }
        };
        // 服务配置校验.end

        //////////////////////////////////////////////////////////////////////////////////////////////////////////////


        // 服务管理检验.start
        // 校验服务端口
        const validate_service_port = (rule, value, callback) => {
            if (typeof value == "undefined" || value == null) {
                callback(new Error("请选择端口"));
            } else if (value.length == 0) {
                callback(new Error("请选择端口"));
            } else {
                callback();
            }
        };

        // 校验指定端口
        const validate_service_node_port = (rule, value, callback) => {

            if (this.serviceForm.visible && this.serviceForm.protocol == 'tcp' && this.serviceForm.portType == 'appoint') {
                if (typeof value == "undefined" || value == null) {
                    callback(new Error("请填写端口"));
                } else if (value.length == 0) {
                    callback(new Error("请填写端口"));
                } else {
                    let reg = /^\+?[1-9][0-9]*$/;
                    if (!reg.test(value)) {
                        callback(new Error("非法端口"));
                    } else {
                        callback();
                    }
                }
            } else {
                callback();
            }
        };

        // 校验域名
        const validate_service_domain_name = (rule, value, callback) => {
            if (this.serviceForm.visible && this.serviceForm.protocol == 'http' && this.serviceForm.domainNameType == 'appoint') {
                if (typeof value == "undefined" || value == null) {
                    callback(new Error("请填写域名"));
                } else if (value.length == 0) {
                    callback(new Error("请填写域名"));
                } else {
                    //let reg = /^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*/;
                    if (value == '*.venus.me') {
                        callback(new Error("非法域名: e.g. example.com"));
                    } else if (!validateDomainName(value)) {
                        callback(new Error("非法域名: e.g. example.com"));
                    } else {
                        // 后台校验
                        let _param = {
                            domainName: value
                        };
                        this.httpClient
                            .httpClientget(
                            this.projectConfig.URL_API_APP_MANAGE_DOMAIN_NAME,
                            _param
                            )
                            .then(res => {
                                const code = res.data;
                                if (code == this.projectConfig.CODE_OK) {
                                    callback(new Error("域名已经存在"));
                                } else {
                                    callback();
                                }
                            });
                    }
                }
            } else {
                callback();
            };
        };

        // 校验服务名称
        const validate_service_name = (rule, value, callback) => {

            if (this.serviceForm.serviceNameType == 'appoint') {
                if (typeof value == "undefined" || value == null) {
                    callback(new Error("请填写服务名称"));
                } else if (value.length == 0) {
                    callback(new Error("请填写服务名称"));
                } else {
                    let reg = /(^[a-z]){1}([a-z]|[0-9]|[-]){2,61}([a-z]|[0-9]){1}$/;
                    if (!reg.test(value)) {
                        callback(new Error("以[a~z]开头，允许[0~9]、[-]，长度大于4，且以小写英文或数字结尾"));
                    } else {
                        // 后台校验,是否重复
                        let _param = {
                            namespace: this.appManageBean.namespace,
                            serviceName: value
                        };
                        this.httpClient
                            .httpClientget(
                            this.projectConfig.URL_API_APP_MANAGE_APP_SERVICE_NAME,
                            _param
                            )
                            .then(res => {
                                const code = res.data;
                                if (code == this.projectConfig.CODE_OK) {
                                    callback(new Error("服务名称已经存在"));
                                } else {
                                    callback();
                                }
                            });
                    }
                }
            } else {
                callback();
            }
        };


        // 服务管理检验.end

        return {
            // 应用操作按钮
            handleAppRadio: '水平扩展',
            // 应用实体
            appManageBean: {
                id: '', // 应用ID
                appName: '', // 应用名称
                appNameKube: '', // 应用名称(k8s)
                appKind: '', // 应用类型
                imageName: '', // 应用当前使用的镜像名称
                imageVersion: '', // 应用当前使用的镜像版本
                namespace: '', // 应用所属空间
                described: '', // 应用描述
                createTime: '', // 应用创建时间
                lastUpdateTime: '', // 应用最后更新时间
                replicas: '', // 应用副本数
                status: '', // 应用状态
                timeDiff: '', // 应用创建的时间间隔
                restartCount: 0, // 应用重启数
                autoScale: '', // 是否开启了自动伸缩
                appServiceAddressList: [], // 应用服务地址
                //add by lcy 180511 start
                command: [],  //启动命令
                args: [],     //参数
                envs: [],     //环境变量
                requests: {}, //资源(cpu,memory)最低请求
                limits: {}    //资源(cpu,memory)最大限制
                //add by lcy 180511 end
            },

            //add by lcy 180514 start
            resourceConfigShowModal: 'query',//资源配置显示模式  query/edit  (显示模式/编辑模式)
            startParaShowModal: 'query',//启动参数显示模式  query/edit  (显示模式/编辑模式)
            evnShowModal: 'query',//环境变量显示模式  query/edit  (显示模式/编辑模式)

            EditRequestMemory: '', //修改内存的请求值
            EditLimitsMemory: '',  //修改内存的最大值
            EditRequestCpu: '',    //修改cpu的请求值
            EditLimitsCpu: '',     //修改cpu的最大值
            EditCommandStr: '',    //修改启动命令的值
            EditArgsStr: '',       //修改参数值
            EditEnvs: [],          //环境变量
            //add by lcy 180514 end

            // 显示第一个面板
            activeName2: "first",
            // 应用描述编辑form
            appDescribedForm: {
                appId: '', // 应用ID,
                described: "", // 应用描述
            },
            // 是否禁用水平扩展按钮组
            isDisabledHorizontalScalingButton: true,
            // 是否禁用自动伸缩按钮
            isDisabledAutoScalingButton: true,
            // 是否禁用灰度升级按钮
            isDisabledGrayUpdateButton: true,
            // 是否禁用更改配置按钮
            isDisabledEditConfigButton: true,
            // 是否禁用删除应用按钮
            isDisabledDeleteAppButton: true,
            // 是否禁用重新部署应用按钮
            isDisabledReDeployButton: true,

            // 是否加载容器组table
            loadingContainerTable: false,
            // 容器组table
            contrainerDataLis: [],
            // 是否禁用自动伸缩菜单
            isDisabledHPA: true,
            // 是否展示编辑应用描述的取消按钮
            showDescribedCancelButton: false,
            // 是否展示编辑应用描述的确定按钮
            showDescribedSureButton: false,
            // 是否禁用应用描述编辑的文本域
            disabledAppDescribedArea: true,
            // 是否隐藏编辑按钮
            showDescribedEditButton: true,
            // podlist 大小
            podTotal: 0,
            /////////////////////////////////////////////////////水平伸缩/////////////////////////////////////////////////
            // 水平伸缩组件参数.start
            scaliAppForm: {
                id: '',
                replicas: 0,
                appName: '',
                appNameKube: '',
                namespace: '',
                appKind: '',
            },
            scaleAppFormVisible: false,
            // 水平伸缩组件参数.end
            ////////////////////////////////////////////////////自动伸缩//////////////////////////////////////////////////
            // 自动伸缩应用参数.start
            autoScaliAppForm: {
                minReplicas: 1, // 最小实例数量
                maxReplicas: 2, // 最大实例数量
                targetCpuPercent: 30, // CPU阈值
                appName: '',
                appNameKube: '',
                namespace: ''
            },
            autoScaleAppFormVisible: false,
            // 是否打开自动伸缩
            isAutoScaleAppSwitch: false,
            // 自动伸缩对话框,确定按钮,禁用
            isDisabledUpdateAutoScaleButton: true,
            appMinReplicasFromServer: 1,
            appMaxReplicasFromServer: 2,
            appTargetCpuPercentServer: 30,
            // 自动伸缩应用参数.end
            ////////////////////////////////////////////////////灰度升级//////////////////////////////////////////////////
            // 灰度升级应用.start
            grayUpdateAppFormVisible: false,
            grayUpdateAppForm: {
                id: '',
                appName: '',
                appNameKube: '',
                appKind: '',
                imageName: '',
                imageVersion: '',
                targetImageVersion: '',
                namespace: '',
            },
            // 目标镜像数组
            imageVersionArr: [],
            // 灰度升级应用.end
            //////////////////////////////////////////////////配置管理////////////////////////////////////////////////////
            // 服务配置管理.start
            // 对话框显示
            configMapManageDialogVisible: false,
            // 表单
            configMapManageForm: {
                id: '',
                mouthPath: '',
                configGroup: '',
                configFiles: [],
                volumeName: '',
                namespace: '',
                appNameKube: '',
                appKind: '',
            },
            // 配置组数组
            configMapArr: [],
            // 配置文件数组
            configFilesArr: [],
            // 加载配置管理table
            loadingConfigMapManageDataTable: false,
            // 配置管理table
            configMapManageData: [],
            // 校验规则
            configMapManageFormRules: {
                mouthPath: [
                    { required: true, trigger: "blur", validator: validateConfigMangePath }
                ],
                configGroup: [
                    { required: true, trigger: "blur", validator: validateConfigMangeConfigMap }
                ],
                configFiles: [
                    { required: true, trigger: "blur", validator: validateConfigMangeConfigFiles }
                ]
            },
            // 禁用挂载目录输入框
            disabledConfigManagePathInput: true,
            disabledConfigManageSaveButton: true,
            disabledConfigManageDeleteButton: true,


            // 服务配置管理.end
            //////////////////////////////////////////////////////监控////////////////////////////////////////////////
            // 应用监控插件参数.start
            monitorObject: 'pod',
            memory_metrics: 'memory/usage',
            cpu_metrics: 'cpu/usage_rate',
            net_in_metrics: 'network/rx_rate',
            net_out_metrics: 'network/tx_rate',
            monitorNamespace: '',
            monitorPodNames: [],
            // 应用监控插件参数.end

            // 日志监控插件.参数.start
            appLogNamespace: '',
            appLogPodNames: [],
            // 日志监控插件.参数.end

            // 操作记录.参数.start
            operLogAppName: '',
            // 操作记录.参数.end

            ////////////////////////////////////////////////自动伸缩数据展示面板/////////////////////////////////////////////////////////
            // 自动伸缩实时数据
            autoExtendTableData: [],
            // 是否加载自动伸缩实时数据
            loadingAutoExtendDataTable: false,
            ///////////////////////////////////////////////镜像版本明细展示面板///////////////////////////////////////////////////////
            loadingImageVersionDescribedDataTable: false,
            imageVersionDescribedTableData: [],
            ///////////////////////////////////////////////服务管理////////////////////////////////////////////////////////////////
            // 服务管理.start
            // 是否展示对话框
            serviceDialogVisible: false,
            // 服务配置数据
            serviceData: [],
            // 是否现在加载条
            loadingServiceDataTable: false,
            // 服务表单
            serviceForm: {
                id: '',
                port: '',
                protocol: "tcp",
                visible: false,
                portType: "dynamic",
                nodePort: '',
                domainName: '*.venus.me',
                domainNameType: 'dynamic',
                namespace: '',
                appNameKube: '',
                serviceNameType: 'dynamic',
                serviceName: ''

            },
            // 服务端口数组
            appServicePortArr: [],
            disabledServiceSaveButton: true,
            disabledServiceDeleteButton: false,
            serviceFormRules: {
                port: [
                    { required: true, trigger: "blur", validator: validate_service_port }
                ],
                nodePort: [
                    { required: true, trigger: "blur", validator: validate_service_node_port }
                ],
                domainName: [
                    { required: true, trigger: "blur", validator: validate_service_domain_name }
                ],
                serviceName: [
                    { required: true, trigger: "blur", validator: validate_service_name }
                ]
            },
            disabledServicePortType: true,
            disabledServiceDomainNameType: true,
            disabledServiceNodePort: true,
            disabledServiceDomainName: true,
            disabledServicePort: true,
            disabledServiceProtocol: true,
            // 服务名称禁用
            disabledServiceNameType: true,
            disabledServiceName: true,


            // 服务管理.end
        };
    },
    created() {
        // 根据应用ID,获取应用信息
        this.getAppBase();
        // 根据当前应用,获取容器组
        this.getPodList();

    },
    methods: {
        //method add by lcy 2018/5/14 start
        setEditRequestMemory() {
            this.EditRequestMemory = this.appManageBean.requests.memory;
        },
        setEditLimitsMemory() {
            this.EditLimitsMemory = this.appManageBean.limits.memory;
        },
        setEditRequestCpu() {
            this.EditRequestCpu = this.appManageBean.requests.cpu;
        },
        setEditLimitsCpu() {
            this.EditLimitsCpu = this.appManageBean.limits.cpu;
        },

        setEditCommandStr() {
            let commandStr = '';
            if (this.appManageBean.command != null && this.appManageBean.command != undefined) {
                this.appManageBean.command.forEach(function(ele) {
                    if (commandStr != '') {
                        commandStr += ' ' + ele;
                    } else {
                        commandStr += ele;
                    }
                });
            }
            this.EditCommandStr = commandStr;
        },

        setEditArgsStr() {
            let argStr = '';
            if (this.appManageBean.args != null && this.appManageBean.args != undefined) {
                this.appManageBean.args.forEach(function(ele) {
                    if (argStr != '') {
                        argStr += ' ' + ele;
                    } else {
                        argStr += ele;
                    }
                });
            }
            this.EditArgsStr = argStr;
        },
        setEditEnvs() {
            let tmpEditEnvs = [];
            if (this.appManageBean.envs != undefined && this.appManageBean.envs != null) {
                this.appManageBean.envs.forEach(function(ele) {
                    let evn = { name: ele.name, value: ele.value };
                    tmpEditEnvs.push(evn);
                });
            }
            this.EditEnvs = tmpEditEnvs;
        },
        //新增一个环节变量
        addAEnv() {
            let evn = { name: '', value: '' };
            this.EditEnvs.push(evn);
        },
        //删除一个环节变量
        deleteAEnv(index) {
            this.EditEnvs.splice(index, 1)
        },

        //设置应用基本信息(含资源配置,启动参数,环境变量)
        updateAppBaseInfo(updateType) {
            let tmpStr = '';
            let parm = {
                appKind: this.appManageBean.appKind,
                appName: this.appManageBean.appName,
                appNameKube: this.appManageBean.appNameKube,
                updateType: updateType,
                namespace: this.appManageBean.namespace
            };

            if (updateType == 0) {
                tmpStr = '更新资源配置,';
                parm.limitsCpu = this.EditLimitsCpu;
                parm.limitsMemory = this.EditLimitsMemory;
                parm.requestCpu = this.EditRequestCpu;
                parm.requestMemory = this.EditRequestMemory;
            }
            if (updateType == 1) {
                tmpStr = '更新启动参数,';
                parm.command = this.EditCommandStr.split(" ");
                parm.args = this.EditArgsStr.split(" ");
            }
            if (updateType == 2) {
                tmpStr = '更新环境变量,';
                parm.envs = this.EditEnvs;
            }

            this.$confirm('此操作将' + tmpStr + ', 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //操作审计
                let thisTmp = this;
                tmpStr=tmpStr+":"+this.appManageBean.appName + '=' + this.appManageBean.imageName + ':' + this.appManageBean.imageVersion
                this.userBaseInfo.setOperObjectName(tmpStr);
                this.httpClient.httpClientPost(this.projectConfig.URL_API_APP_MANAGE_APP_BASE, parm).then(res => {
                    let r = res.data;
                })
                // 等待5秒后再刷新
                setTimeout(() => {
                    this.getAppBase();
                    this.getPodList();
                    if (updateType == 0) {
                        thisTmp.resourceConfigShowModal = 'query';
                    }
                    if (updateType == 1) {
                        thisTmp.startParaShowModal = 'query';
                    }
                    if (updateType == 2) {
                        thisTmp.evnShowModal = 'query';
                    }
                }, 5000);
            }).catch(() => {
            });
        },


        //method add by lcy 2018/5/14 end


        // 返回应用展示首页
        back() {
            this.$router.push({
                path: "/apply/management/app_page"
            });
        },
        // 应用扩展等指令接收
        // handleApp(command) {
        //     console.log(command);
        // },
        // // 重新部署应用
        // handleReDeploy() {
        //     console.log('重新部署应用');
        // },
        // 面板点击事件
        tabPaneClick() {
            // 获取当前面板编号
            const panNumber = this.activeName2;
            // 监控面板,或日志面板被点击了
            if (panNumber == 'second' || panNumber == 'third' || panNumber == 'four' || panNumber == 'five') {
                // 当前空间值
                this.monitorNamespace = this.userBaseInfo.getCurrentSelectedNamespace();
                this.getPodNames();
            }

            // 自动伸缩面板点击
            if (panNumber == 'six') {
                // 获得自动伸缩数据
                this.getAutoExtendData();
            }

            // 镜像版本明细面板点击
            if (panNumber == 'seven') {
                // 获得镜像版本明细说明
                this.getImageVersionDescribedData();
            }

        },
        // 打开应用描述,编辑文本域
        openAppDescridedArea() {
            // 是否展示编辑应用描述的取消按钮
            this.showDescribedCancelButton = true;
            // 是否展示编辑应用描述的确定按钮
            this.showDescribedSureButton = true;
            // 是否禁用应用描述编辑的文本域
            this.disabledAppDescribedArea = false;
            // 隐藏编辑按钮
            this.showDescribedEditButton = false;
        },
        // 关闭应用描述,编辑
        closeAppDescridedArea() {
            // 是否展示编辑应用描述的取消按钮
            this.showDescribedCancelButton = false;
            // 是否展示编辑应用描述的确定按钮
            this.showDescribedSureButton = false;
            // 是否禁用应用描述编辑的文本域
            this.disabledAppDescribedArea = true;
            // 是否显示编辑按钮
            this.showDescribedEditButton = true;
        },
        // 修改应用描述
        editAppDescribed() {
            const described = this.appManageBean.described;
            if (described.length < 10) {
                this.$notify.warning(
                    '应用描述长度不能少于10'
                );
            } else {
                const appId = this.appManageBean.id;
                if (appId != '' && typeof appId != undefined) {
                    // 修改
                    // 操作审计
                    //this.userBaseInfo.setOperObjectName(this.appManageBean.appName);
                    this.setAppOperLog();
                    this.httpClient.httpClientPatch(this.projectConfig.URL_API_APP_MANAGE_EDIT_APP_DESCRIBED, this.appManageBean).then(res => {
                        // 关闭按钮
                        this.closeAppDescridedArea();
                        // 刷新
                        this.getAppBase();
                    })
                }
            }
        },
        // 获得应用具体信息
        getAppBase() {
            // 在存储中拿到当前的应用ID
            const appId = appManagement.getAppId();
            if (appId == '') {
                this.$notify.error(
                    '应用ID为空,获取应用信息失败'
                );
                return false;
            }
            // 获取应用信息
            let getAppBaseUrl = this.projectConfig.URL_API_APP_MANAGE_GET_APP_BASE + '/' + appId;

            this.httpClient.httpClientget(getAppBaseUrl, '').then(res => {
                this.appManageBean = res.data;
                // 打开操作按钮
                if (this.appManageBean.id != '') {

                    // 只有deployment资源对象 才有自动伸缩功能
                    if (this.appManageBean.appKind == 'Deployment') {
                        this.isDisabledAutoScalingButton = false;
                    }
                    // 当前应用没有开启自动伸缩功能,可以使用水平扩展功能
                    if (!this.appManageBean.autoScale) {
                        this.isDisabledHorizontalScalingButton = false;
                    }
                    this.isDisabledGrayUpdateButton = false;
                    this.isDisabledEditConfigButton = false;
                    this.isDisabledDeleteAppButton = false;
                    this.isDisabledReDeployButton = false;

                    // 获取自动伸缩的监控数据
                    this.getAutoExtendData();
                }
            });

        },
        // 获取pod list
        getPodList() {
            let namespace = this.userBaseInfo.getCurrentSelectedNamespace();
            const appId = appManagement.getAppId();
            if (namespace != '' && appId != '') {
                // table显示加载
                this.loadingContainerTable = true;
                let getPodListUrl = this.projectConfig.URL_API_APP_MANAGE_GET_POD_LIST + '/' + namespace + '/' + appId;
                this.httpClient.httpClientget(getPodListUrl, '').then(res => {
                    // table关闭加载
                    this.loadingContainerTable = false;
                    this.contrainerDataLis = res.data;
                    this.podTotal = res.data.length;
                });
                // 重新获取基本信息
                this.getAppBase();
            } else {
                this.$notify.error(
                    '当前空间名称为空或应用ID为空,获取容器组信息失败'
                );
            }
        },
        // 获取应用对应的pod名称列表
        getPodNames() {
            // 当前空间值
            const namespace = this.userBaseInfo.getCurrentSelectedNamespace();
            const appNameKube = this.appManageBean.appNameKube;
            if (namespace != '' && typeof namespace != undefined
                && appNameKube != '' && typeof appNameKube != undefined) {
                let getPodNamestUrl = this.projectConfig.URL_API_APP_MANAGE_POD_NAMES + '/' + namespace + '/' + appNameKube;
                this.httpClient.httpClientget(getPodNamestUrl, '').then(res => {
                    this.monitorPodNames = res.data;
                });
            }
        },
        // 对应用进行操作
        ////////////////////////////////////水平伸缩/////////////////////////////////////////
        // 打开水平伸缩弹框
        openScaleAppDialog() {
            // 获的当前应用实例数
            let currentAppCount = this.appManageBean.replicas;
            if (currentAppCount == '') {
                return false;
            }
            let count = currentAppCount.split('/')[1];
            // 此处要将string 转换成number
            this.scaliAppForm.replicas = Number(count);
            this.scaliAppForm.id = this.appManageBean.id;
            this.scaliAppForm.appName = this.appManageBean.appName;
            this.scaliAppForm.appNameKube = this.appManageBean.appNameKube;
            this.scaliAppForm.namespace = this.appManageBean.namespace;
            this.scaliAppForm.appKind = this.appManageBean.appKind;
            // 打开水平伸缩对话框
            this.scaleAppFormVisible = true;
        },
        // 水平伸缩应用
        horizontalScalingApp() {
            // 获得当前应用实例的数量
            let currentAppCount = this.appManageBean.replicas;
            let count = currentAppCount.split('/')[1];
            if (count == this.scaliAppForm.replicas) {
                // 提交的实例数和当前应用实例数相等,不需要伸缩
                this.$notify.warning(
                    '期望伸缩的实例数和当前应用实例数相等,不需要伸缩'
                );
                return false;
            }
            // 简单的校验
            if (this.scaliAppForm.namespace != '' || this.scaliAppForm.appNameKube != '' && this.scaliAppForm.appKind != '') {
                // 操作审计
                //this.userBaseInfo.setOperObjectName(this.appManageBean.appName + '=' + this.appManageBean.imageName + ':' + this.appManageBean.imageVersion);
                this.setAppOperLog();
                // patch 后台
                this.httpClient.httpClientPatch(this.projectConfig.URL_API_APP_MANAGE_HORIAONTAL_SCALE, this.scaliAppForm).then(res => {
                    //
                });
                // 提示用户
                this.$notify.info(
                    '已经提交,水平伸缩应用操作,请等待数秒'
                );
            } else {
                this.$notify.error(
                    '手动伸缩应用失败'
                );
            }

            // 关闭对话框
            this.scaleAppFormVisible = false;
            // 等待5秒后再刷新
            setTimeout(() => {
                this.getAppBase();
                this.getPodList();
            }, 5000);


        },
        // 关闭水平伸缩对话框
        closeScaleAppDialog() {
            this.scaleAppFormVisible = false;
        },
        ////////////////////////////////////自动伸缩应用/////////////////////////////////////////
        // 当自动伸缩对话框中的最小实例数量改变时触发
        changeAppMinCountOnAutoScalue() {
            // 最小实例不能小于最大实例数量
            const minR = this.autoScaliAppForm.minReplicas;
            const maxR = this.autoScaliAppForm.maxReplicas;
            if (minR >= maxR) {
                this.autoScaliAppForm.maxReplicas = minR + 1;
            }
        },
        // 当自动伸缩对话框中的最大实例数量改变时触发
        changeAppMaxCountOnAutoScalue() {
            const minR = this.autoScaliAppForm.minReplicas;
            const maxR = this.autoScaliAppForm.maxReplicas;
            if (minR >= maxR) {
                this.autoScaliAppForm.minReplicas = maxR - 1;
            }
        },
        // 当自动伸缩对话框中开关状态改变事件
        changeAutoScaleSwitchState() {
            // 获取开关状态
            const switchState = this.isAutoScaleAppSwitch;
            // 当前实例是否开启了自动伸缩功能
            const isAutoScale = this.appManageBean.autoScale;
            if (switchState) {
                // 打开确定按钮
                this.isDisabledUpdateAutoScaleButton = false;
            } else if (isAutoScale && !switchState) {
                // 打开确定按钮
                // 此操作属于是用于删除应用的伸缩功能
                this.isDisabledUpdateAutoScaleButton = false;
            } else {
                // 关闭确定按钮
                this.isDisabledUpdateAutoScaleButton = true;
            }
        },
        // 打开自动伸缩对话框
        openAutoScaleAppDialog() {
            // 当前应用是否启动了自动伸缩功能
            if (this.appManageBean.autoScale) {
                // 打开确定按钮
                this.isDisabledUpdateAutoScaleButton = false;
                // 打开开关
                this.isAutoScaleAppSwitch = true;
                // 从k8s里面获取当前实例的自动伸缩参数
                if (this.appManageBean.namespace != '' && this.appManageBean.appNameKube != '') {
                    let getUrl = this.projectConfig.URL_API_APP_MANAGE_HPA_DETAILED + '/' + this.appManageBean.namespace + '/' + this.appManageBean.appNameKube;
                    this.httpClient.httpClientget(getUrl, '').then(res => {
                        // 赋值
                        this.autoScaliAppForm.minReplicas = res.data.minReplicas;
                        this.autoScaliAppForm.maxReplicas = res.data.maxReplicas;
                        this.autoScaliAppForm.targetCpuPercent = res.data.targetCpuPercent;
                        // 记录服务器的参数
                        this.appMinReplicasFromServer = res.data.minReplicas;
                        this.appMaxReplicasFromServer = res.data.maxReplicas;
                        this.appTargetCpuPercentFromServer = res.data.targetCpuPercent;
                    })
                }

            }
            this.autoScaliAppForm.appName = this.appManageBean.appName;
            this.autoScaliAppForm.appNameKube = this.appManageBean.appNameKube;
            this.autoScaliAppForm.namespace = this.appManageBean.namespace;
            // 打开自动伸缩对话框
            this.autoScaleAppFormVisible = true;
        },
        // 关闭自动伸缩对话框
        closeAutoScaleAppDialog() {
            this.autoScaleAppFormVisible = false;
        },
        // 自动伸缩应用
        autoScalingApp() {
            // 获取对话框中开关状态
            const switchState = this.isAutoScaleAppSwitch;
            // 当前实例是否开启了自动伸缩功能
            const isAutoScale = this.appManageBean.autoScale;

            // 简单,校验
            if (this.autoScaliAppForm.namespace == '' || typeof this.autoScaliAppForm.namespace == 'undefined'
                || this.autoScaliAppForm.appNameKube == '' || typeof this.autoScaliAppForm.appNameKube == 'undefined') {
                // 此次操作失败
                this.$notify.warning(
                    '参数不完整,自动伸缩,失败'
                );
                return false;
            }

            // 1: 如果当前应用开启了自动伸缩,并且开关关闭,则删除自动伸缩
            if (isAutoScale && !switchState) {
                // 删除
                let deleteAutoScaleUrl = this.projectConfig.URL_API_APP_MANAGE_AUTO_SCALE + '/' + this.autoScaliAppForm.namespace + '/' + this.autoScaliAppForm.appNameKube;
                // 操作审计
                //this.userBaseInfo.setOperObjectName(this.appManageBean.appName + '=' + this.appManageBean.imageName + ':' + this.appManageBean.imageVersion);
                this.setAppOperLog();
                this.httpClient.httpClientDelete(deleteAutoScaleUrl, '').then(res => {
                    // 没有操作
                })
            } else if (!isAutoScale && switchState) {
                // 操作审计
                //this.userBaseInfo.setOperObjectName(this.appManageBean.appName);
                this.setAppOperLog();
                // 2: 新增
                this.httpClient.httpClientPost(this.projectConfig.URL_API_APP_MANAGE_AUTO_SCALE, this.autoScaliAppForm).then(res => {
                    // 没有操作
                    if (res.meta.code == 200) {
                        this.isDisabledHorizontalScalingButton = true;
                    }
                })
            } else {
                // 修改
                // 3: 判断当前参数是否有过修改
                if (this.autoScaliAppForm.minReplicas == this.appMinReplicasFromServer
                    && this.autoScaliAppForm.maxReplicas == this.appMaxReplicasFromServer
                    && this.autoScaliAppForm.targetCpuPercent == this.appTargetCpuPercentFromServer) {
                    this.$notify.warning(
                        '修改的参数没有变化,不需重新设置自动伸缩的参数'
                    );
                    return false;
                }
                // 操作审计
                //this.userBaseInfo.setOperObjectName(this.appManageBean.appName + '=' + this.appManageBean.imageName + ':' + this.appManageBean.imageVersion);
                this.setAppOperLog();
                // 提交后台,修改自动伸缩参数
                this.httpClient.httpClientPatch(this.projectConfig.URL_API_APP_MANAGE_AUTO_SCALE, this.autoScaliAppForm).then(res => {
                    // 没有操作
                })
                // 提示用户
                this.$notify.info(
                    '已经提交,自动伸缩应用操作,请等待数秒'
                );
            }

            // 最后刷新页面,关闭对话框
            this.autoScaleAppFormVisible = false;
            // 等待5秒后再刷新
            setTimeout(() => {
                this.getAppBase();
                this.getPodList();
            }, 5000);

        },
        ////////////////////////////////////灰度发布应用////////////////////////////////////////
        // 打开灰度升级应用对话框
        openGrayUpdateAppDialog() {
            // 改变值
            this.grayUpdateAppFormVisible = true;
            // 赋值
            this.grayUpdateAppForm.id = this.appManageBean.id;
            this.grayUpdateAppForm.appName = this.appManageBean.appName;
            this.grayUpdateAppForm.appNameKube = this.appManageBean.appNameKube;
            this.grayUpdateAppForm.namespace = this.appManageBean.namespace;
            this.grayUpdateAppForm.appKind = this.appManageBean.appKind;
            this.grayUpdateAppForm.imageName = this.appManageBean.imageName;
            this.grayUpdateAppForm.imageVersion = this.appManageBean.imageVersion;
            // 加载镜像列表
            this.getAppImageVersionTag();
        },
        // 关闭灰度升级应用对话框
        closeGrayUpdateAppDialog() {
            this.grayUpdateAppFormVisible = false;
        },
        // 点击灰度升级,获取当前应用,所使用的镜像版本列表
        getAppImageVersionTag() {
            let getImageTagUrl = this.projectConfig.URL_API_APP_MANAGE_IMAGE_TAG;

            const param = {
                imageName: this.grayUpdateAppForm.imageName
            };

            this.httpClient.httpClientget(getImageTagUrl, param).then(res => {
                this.imageVersionArr = res.data;
            });
        },
        // 灰度发布应用
        grayUpdateApp() {
            if (this.grayUpdateAppForm.targetImageVersion == '') {
                this.$notify.warning(
                    '请选择灰度升级的镜像版本'
                );
                return false;
            }

            // 简单的校验
            if (this.grayUpdateAppForm.targetImageVersion == this.appManageBean.imageVersion) {
                // 灰度升级的镜像版本和当前应用镜像版本相同,不需要升级
                this.$notify.warning(
                    '灰度升级的镜像版本和当前应用镜像版本相同,不需要升级'
                );
                return false;
            }

            if (this.grayUpdateAppForm.namespace != '' && this.grayUpdateAppForm.appNameKube != ''
                && this.grayUpdateAppForm.imageName != '' && this.grayUpdateAppForm.appKind != '' &&
                this.grayUpdateAppForm.targetImageVersion != '') {

                // 操作审计
                this.userBaseInfo.setOperObjectName(this.appManageBean.appName + '=' + this.appManageBean.imageName + ':' + this.appManageBean.imageVersion + '>>>' + this.grayUpdateAppForm.targetImageVersion);
                //this.setAppOperLog();
                this.httpClient.httpClientPatch(this.projectConfig.URL_API_APP_MANAGE_GRAY_UPDATE, this.grayUpdateAppForm).then(res => {
                    //
                });
                // 提示用户
                this.$notify.info(
                    '已经提交,灰度升级应用操作,请等待数秒'
                );
            }

            // 关闭对话框
            this.grayUpdateAppFormVisible = false;
            // 等待5秒后再刷新
            setTimeout(() => {
                this.getAppBase();
                this.getPodList();
            }, 5000);

        },
        ///////////////////////////////////服务配置管理//////////////////////////////////////////
        // 打开服务配置管理对话框
        openConfigMapManageDialog() {
            this.configMapManageDialogVisible = true;
            // 清空表单
            this.configMapManageForm.id = '';
            this.configMapManageForm.mouthPath = '';
            this.configMapManageForm.configGroup = '';
            this.configMapManageForm.volumeName = '';
            this.configFilesArr = [];

            // 获得应用服务配置
            this.getAppConfigMap();
            // 获得配置组数组
            this.getAppConfigMapArr();
            // 禁用挂载目录输入框
            this.disabledConfigManagePathInput = true;
            this.disabledConfigManageDeleteButton = true;
            this.disabledConfigManageSaveButton = true;


        },
        // 获得应用服务配置
        getAppConfigMap() {
            let getAppConfigMapUrl = this.projectConfig.URL_API_APP_MANAGE_APP_CONFIG_MANAGE;

            const param = {
                appKind: this.appManageBean.appKind,
                namespace: this.appManageBean.namespace,
                appNameKube: this.appManageBean.appNameKube
            };

            this.httpClient.httpClientget(getAppConfigMapUrl, param).then(res => {
                this.configMapManageData = res.data;
            });
        },
        // 服务配置table行被点击时候
        configMapManageDataTableRowClick: function(row, event, column) {
            // 赋值
            this.configMapManageForm.id = row.id;
            this.configMapManageForm.mouthPath = row.mouthPath;
            this.configMapManageForm.configGroup = row.configGroup;
            this.configMapManageForm.volumeName = row.volumeName;
            this.configFilesArr = row.configFiles;
            this.configMapManageForm.configFiles = row.configFiles;
            // 禁用输入框
            this.disabledConfigManagePathInput = true;
            this.disabledConfigManageSaveButton = false;
            this.disabledConfigManageDeleteButton = false;
        },
        // 获得当前应用所属空间的配置组数组
        getAppConfigMapArr() {
            const namespace = this.appManageBean.namespace;
            if (namespace == '' || typeof namespace == undefined) {
                return false;
            }
            const param = {
                namespace: namespace,
                queryKey: ''
            }
            // 获取数据
            this.httpClient.httpClientget(this.projectConfig.URL_API_APP_CONFIG_GET_CONFIGMAP_NAMESPACE, param).then(res => {
                const d = res.data;
                const pns = [];
                d.forEach(function(element) {
                    if (element.fileCount > 0) {
                        pns.push(element.configMapName);
                    }
                }, this);
                this.configMapArr = pns;
            })
        },
        // 当配置下拉框值改变时速,加载对应的配置文件
        changeConfigGroupValue(val) {
            // 获取配置文件数组
            const namespace = this.appManageBean.namespace;
            const configMapName = val;
            this.configMapManageForm.configFiles = [];
            this.configFilesArr = [];
            if (namespace != '' && configMapName != '' && typeof namespace != undefined && typeof configMapName != undefined) {
                const getUrl = this.projectConfig.URL_API_APP_CONFIG_GET_CONFIGFILE + '/' + namespace + '/' + configMapName;
                this.httpClient.httpClientget(getUrl, '').then(res => {
                    const d = res.data;
                    const pns = [];
                    d.forEach(function(element) {
                        pns.push(element.fileName);
                    }, this);
                    this.configFilesArr = pns;
                })
            } else {
                this.configFilesArr = [];
                this.configMapManageForm.configFiles = [];
            }
        },
        // 处理
        handleConfigManage() {

            let _id = this.configMapManageForm.id;
            if (_id.length == 32 && typeof _id != 'undefined') {
                // 修改
                this.editConfigMapToApp();
            }

            if (_id.length == '' && !this.disabledConfigManagePathInput) {
                // 新增
                this.saveConfigMapToApp();
            }
        },
        // 新增配置组,按钮,清除数据
        addConfigMapToApp() {
            this.configMapManageForm.id = '';
            this.configMapManageForm.mouthPath = '';
            this.configMapManageForm.configGroup = '';
            this.configMapManageForm.volumeName = '';
            this.configMapManageForm.configFiles = [];
            this.configFilesArr = [];
            this.disabledConfigManagePathInput = false;

            this.disabledConfigManageSaveButton = false;
            this.disabledConfigManageDeleteButton = true;
        },
        // 新增配置到应用
        saveConfigMapToApp() {
            // 表单校验
            this.$refs.configMapManageForm.validate(valid => {
                if (valid) {
                    // 修改提交
                    this.configMapManageForm.appKind = this.appManageBean.appKind;
                    this.configMapManageForm.namespace = this.appManageBean.namespace;
                    this.configMapManageForm.appNameKube = this.appManageBean.appNameKube;
                    // 操作审计
                    this.setAppOperLog();
                    this.httpClient.httpClientPost(this.projectConfig.URL_API_APP_MANAGE_APP_CONFIG_MANAGE, this.configMapManageForm).then(res => {
                        this.closeConfigManageDailog();
                    })
                } else {
                    return false;
                }
            })
        },
        // 更改应用配置
        editConfigMapToApp() {
            this.$refs.configMapManageForm.validate(valid => {
                if (valid) {
                    //判断内容是否有修改
                    let configdata = this.configMapManageData;
                    let pns = [];
                    configdata.forEach(function(element) {
                        if (element.id == this.configMapManageForm.id) {
                            pns.push(element);
                        }
                    }, this);


                    let pns2 = [];

                    let _configFilesArr = this.configMapManageForm.configFiles;
                    let _configFilesArr2 = pns[0].configFiles;
                    _configFilesArr.forEach(e1 => {
                        _configFilesArr2.forEach(e2 => {
                            if (e1 == e2) {
                                pns2.push(e1);
                            }
                        })
                    })

                    if (this.configMapManageForm.configGroup == pns[0].configGroup && pns2.length >= pns[0].configFiles.length) {
                        this.$notify.warning(
                            '配置相同,不需修改'
                        );
                    } else {
                        // 修改提交
                        this.configMapManageForm.appKind = this.appManageBean.appKind;
                        this.configMapManageForm.namespace = this.appManageBean.namespace;
                        this.configMapManageForm.appNameKube = this.appManageBean.appNameKube;
                        // 操作审计
                        this.setAppOperLog();
                        this.httpClient.httpClientPatch(this.projectConfig.URL_API_APP_MANAGE_APP_CONFIG_MANAGE, this.configMapManageForm).then(res => {
                            this.closeConfigManageDailog();
                        })
                    }


                } else {
                    return false;
                }
            })
        },
        // 删除应用配置
        deleteConfigMapToApp() {
            // this.$refs.configMapManageForm.validate(valid => {
            //     if (valid && this.configMapManageForm.id.length == 32) {

            //         this.$confirm('此操作将删除应用的配置文件, 是否继续?', '提示', {
            //             confirmButtonText: '确定',
            //             cancelButtonText: '取消',
            //             type: 'warning'
            //         }).then(() => {
            //             this.configMapManageForm.appKind = this.appManageBean.appKind;
            //             this.configMapManageForm.namespace = this.appManageBean.namespace;
            //             this.configMapManageForm.appNameKube = this.appManageBean.appNameKube;

            //             this.httpClient.httpClientDelete(this.projectConfig.URL_API_APP_MANAGE_APP_CONFIG_MANAGE, this.configMapManageForm).then(res => {
            //                 this.closeConfigManageDailog();
            //             })
            //         }).catch(() => {
            //         });
            //     }
            // })

            if (this.configMapManageForm.id.length == 32) {

                this.$confirm('此操作将删除应用的配置文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.configMapManageForm.appKind = this.appManageBean.appKind;
                    this.configMapManageForm.namespace = this.appManageBean.namespace;
                    this.configMapManageForm.appNameKube = this.appManageBean.appNameKube;
                    // 操作审计
                    this.setAppOperLog();
                    this.httpClient.httpClientDelete(this.projectConfig.URL_API_APP_MANAGE_APP_CONFIG_MANAGE, this.configMapManageForm).then(res => {
                        this.closeConfigManageDailog();
                    })
                }).catch(() => {
                });
            }
        },
        // 取消操作
        closeConfigManageDailog() {
            this.configMapManageDialogVisible = false;
            // 清空表单
            this.configMapManageForm.id = '';
            this.configMapManageForm.mouthPath = '';
            this.configMapManageForm.configGroup = '';
            this.configFilesArr = [];
        },
        ///////////////////////////////////删除应用//////////////////////////////////////////////
        // 删除应用
        deleteApp() {
            // 获取当前应用的ID
            let appId = this.appManageBean.id;
            if (appId != '' && typeof appId != 'undefined') {
                // 删除
                this.$confirm('此操作将永久删除应用, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let deleteUrl = this.projectConfig.URL_API_APP_MANAGE_DELETE_APP + '/' + this.appManageBean.id;
                    // 操作审计
                    //this.userBaseInfo.setOperObjectName(this.appManageBean.appName + '=' + this.appManageBean.imageName + ':' + this.appManageBean.imageVersion);
                    this.setAppOperLog();
                    // 执行删除操作
                    // 遮罩开始
                    //const loading = this.$loading({ body: true });
                    this.httpClient.httpClientDelete(deleteUrl, '').then(res => {
                        // 遮罩结束
                        //loading.close();
                    })
                    this.$notify.info(
                        '已经提交,删除应用操作,需要数秒才能删除应用'
                    );
                    // 返回应用查询页面
                    this.back();

                }).catch(() => {
                });
            }
        },
        //////////////////////////////////重新部署应用////////////////////////////////////////////
        // 重新部署应用
        reDeployApp() {
            // 空间名称
            const namespace = this.appManageBean.namespace;
            // 应用名称
            const appNameKube = this.appManageBean.appNameKube;
            // 当前应用实例个数
            const replicas = this.appManageBean.replicas;
            // 应用类型
            const appKind = this.appManageBean.appKind;
            // 获取当前实例个数
            let currentAppCount = this.appManageBean.replicas;
            if (currentAppCount == '') {
                return false;
            }
            let count = currentAppCount.split('/')[1];

            if (count == 0) {
                this.$notify.warning(
                    '当前应用实例个数为: 0个,不需要重新部署,请使用水平扩展功能,扩展实例数'
                );
                return false;
            }

            if (namespace != '' && typeof namespace != undefined
                && appNameKube != '' && typeof appNameKube != undefined
                && replicas != '' && typeof replicas != undefined
                && appKind != '' && appKind != undefined) {
                // 重新部署
                this.$confirm('此操作将重新部署应用, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 操作审计
                    //this.userBaseInfo.setOperObjectName(this.appManageBean.appName + '=' + this.appManageBean.imageName + ':' + this.appManageBean.imageVersion);
                    this.setAppOperLog();
                    // 执行重新部署
                    this.httpClient.httpClientPatch(this.projectConfig.URL_API_APP_MANAGE_REDEPLOY_APP, this.appManageBean).then(res => {
                        // 返回应用查询页面
                        this.back();
                    })

                }).catch(() => {
                });
            }
        },
        // 重新分配pod
        reStartPod: function(index, row) {
            const namespace = row.namespace;
            const appNameKube = row.appNameKube;
            if (namespace != '' && typeof namespace != undefined && appNameKube != '' && typeof appNameKube != undefined) {
                // 重新分配pod
                // 删除
                this.$confirm('此操作将重新分配容器, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 操作审计
                    //this.userBaseInfo.setOperObjectName(this.appManageBean.appName + '=' + this.appManageBean.imageName + ':' + this.appManageBean.imageVersion);
                    this.setAppOperLog();
                    let deleteUrl = this.projectConfig.URL_API_APP_MANAGE_RESTART_POD + '/' + row.namespace + '/' + row.appNameKube;
                    // 执行删除操作
                    this.httpClient.httpClientDelete(deleteUrl, '').then(res => {
                    })
                    // 等待5秒后再刷新
                    setTimeout(() => {
                        this.getAppBase();
                        this.getPodList();
                    }, 5000);
                }).catch(() => {
                });
            }
        },
        // 设置操作审计
        setAppOperLog() {
            this.userBaseInfo.setOperObjectName(this.appManageBean.appName + '=' + this.appManageBean.imageName + ':' + this.appManageBean.imageVersion);
        },
        ////////////////////////////////自动伸缩数据展示//////////////////////////////////////////////////
        // 获取自动伸缩数据
        getAutoExtendData() {
            if (this.appManageBean.autoScale) {
                // 获取数据
                let param = {
                    hpaName: this.appManageBean.appNameKube + '-hpa',
                    namespace: this.appManageBean.namespace
                }

                // 获取数据
                this.loadingAutoExtendDataTable = true;
                this.httpClient.httpClientget(this.projectConfig.URL_API_APP_MANAGE_APP_MONITOR_HPA, param).then(res => {
                    this.loadingAutoExtendDataTable = false;
                    this.autoExtendTableData = res.data;
                })

            }
        },
        ///////////////////////////////镜像版本明细说明///////////////////////////////////////////
        getImageVersionDescribedData() {
            let imageName = this.appManageBean.imageName;
            if (imageName != null && typeof imageName != undefined && imageName != '') {
                let param = {
                    image: this.appManageBean.imageName
                };
                // 获得所有镜像版本说明
                this.loadingImageVersionDescribedDataTable = true;
                this.httpClient.httpClientget(this.projectConfig.URL_API_APP_GET_IMAGE_DESCRIBED, param).then(res => {
                    this.loadingImageVersionDescribedDataTable = false;
                    this.imageVersionDescribedTableData = res.data;
                })
            }

        },
        //////////////////////////////服务管理/////////////////////////////////////////////////////////////
        // 打开服务管理对话框
        openServiceDailog() {
            this.serviceDialogVisible = true;
            // 获得数据
            this.getServiceData();
        },
        // 获得服务管理数据
        getServiceData() {
            let namespace = this.appManageBean.namespace;
            let appNameKube = this.appManageBean.appNameKube;
            if (namespace != '' && namespace != null && typeof namespace != undefined
                && appNameKube != '' && appNameKube != null && typeof appNameKube != undefined) {
                // 获得数据
                let param = {
                    namespace: this.appManageBean.namespace,
                    appNameKube: this.appManageBean.appNameKube
                };
                this.loadingServiceDataTable = true;
                this.httpClient.httpClientget(this.projectConfig.URL_API_APP_MANAGE_APP_SERVICE_LIST, param).then(res => {
                    this.loadingServiceDataTable = false;
                    //this.serviceData = res.data;
                    // 设置编辑字段
                    const items = res.data;
                    this.serviceData = items.map(v => {
                        // 设置编辑字段
                        this.$set(v, 'edit', false);
                        // 设置原始的映射端口
                        v.originalNodePort = v.nodePort;
                        // 设置原始的映射域名
                        v.originalDomainName = v.domainName;
                        return v;
                    })
                })
            }
        },
        // 服务协议选项值改变事件
        changeServiceProtocol() {
            // 打开映射端口下拉选择
            if (this.serviceForm.visible && this.serviceForm.protocol == 'tcp') {
                this.disabledServicePortType = false;
            } else {
                this.disabledServicePortType = true;
            }

            // 打开映射域名下拉选择
            if (this.serviceForm.visible && this.serviceForm.protocol == 'http') {
                this.disabledServiceDomainNameType = false;
            } else {
                this.disabledServiceDomainNameType = true;
            }

            // 打开指定端口选择下拉
            this.changeServicePortType();

            this.changeServiceDomainNameType();


        },
        // 对外服务按钮事件
        changeServiceVisible(val) {
            // 打开映射端口下拉选择
            if (val && this.serviceForm.protocol == 'tcp') {
                this.disabledServicePortType = false;
            } else {
                this.disabledServicePortType = true;
            }

            // 打开映射域名下拉选择
            if (val && this.serviceForm.protocol == 'http') {
                this.disabledServiceDomainNameType = false;
            } else {
                this.disabledServiceDomainNameType = true;
            }

            if (!val) {
                this.disabledServicePortType = true;
                this.disabledServiceDomainNameType = true;
                this.disabledServiceNodePort = true;
                this.disabledServiceDomainName = true;
            }

            // 打开服务协议选择
            if (val) {
                this.disabledServiceProtocol = false;
            } else {
                this.disabledServiceProtocol = true;
            }

            // 打开指定端口
            if (val && this.serviceForm.protocol == 'tcp' && this.serviceForm.portType == 'appoint') {
                this.disabledServiceNodePort = false;
            } else {
                this.disabledServiceNodePort = true;
            }

            // 打开指定域名
            if (val && this.serviceForm.protocol == 'http' && this.serviceForm.domainNameType == 'appoint') {
                this.disabledServiceDomainName = false;
            } else {
                this.disabledServiceDomainName = true;
            }
        },
        // 映射端口下拉选择值改变事件
        changeServicePortType() {
            if (this.serviceForm.visible && this.serviceForm.protocol == 'tcp' && this.serviceForm.portType == 'appoint') {
                this.disabledServiceNodePort = false;
            } else {
                this.disabledServiceNodePort = true;
            }

        },
        // 映射域名下拉选择值改变事件
        changeServiceDomainNameType() {
            if (this.serviceForm.visible && this.serviceForm.protocol == 'http' && this.serviceForm.domainNameType == 'appoint') {
                this.disabledServiceDomainName = false;
            } else {
                this.disabledServiceDomainName = true;
            }
        },
        // 服务名称类型下拉选择
        changeServiceNameType() {
            if (this.serviceForm.serviceNameType == 'appoint') {
                this.disabledServiceName = false;
            } else {
                this.disabledServiceName = true;
            }
        },
        // 获得应用的开启的端口
        getServicePorts() {
            let appKind = this.appManageBean.appKind;
            let namespace = this.appManageBean.namespace;
            let appNameKube = this.appManageBean.appNameKube;

            if (appKind != '' && typeof appKind != 'undefined' && namespace != '' && typeof namespace != 'undefined'
                && appNameKube != '' && typeof appNameKube != 'undefined') {
                // 获得数据
                let param = {
                    appKind: this.appManageBean.appKind,
                    namespace: this.appManageBean.namespace,
                    appNameKube: this.appManageBean.appNameKube
                };
                this.httpClient.httpClientget(this.projectConfig.URL_API_APP_MANAGE_APP_SERVICE_PORTS, param).then(res => {
                    this.appServicePortArr = res.data;
                })
            }

        },
        // 新增服务
        addService() {
            // 打开服务端口下拉选择框
            this.disabledServicePort = false;
            // 打开服务类型下拉选择框
            this.disabledServiceProtocol = false;
            this.disabledServiceSaveButton = false;
            this.disabledServiceProtocol = true;
            // 打开服务名称类型选择下拉框
            this.disabledServiceNameType = false;
            // 获得端口
            this.getServicePorts();
        },
        // 保存服务
        saveService() {
            // 校验
            this.$refs.serviceForm.validate(valid => {
                if (valid) {
                    this.serviceForm.namespace = this.appManageBean.namespace;
                    this.serviceForm.appNameKube = this.appManageBean.appNameKube;
                    // 操作审计
                    this.setAppOperLog();
                    // 遮罩开始
                    let loading = this.$loading({ body: true });
                    // 提交
                    this.httpClient.httpClientPost(this.projectConfig.URL_API_APP_MANAGE_APP_SERVICE, this.serviceForm).then(res => {
                        // 遮罩结束
                        loading.close();
                        if (res.meta.code == this.projectConfig.CODE_OK) {
                            // 关闭对话框
                            //this.serviceDialogVisible = false;
                            // 重新获取应用的基本数据
                            this.getAppBase();
                            // 刷新数据
                            this.getServiceData();
                        }
                    })
                }
            })
        },
        // 删除服务
        deleteService: function(index, row) {
            let namespace = row.namespace;
            let serviceName = row.serviceName;
            if (namespace != '' && namespace != null && typeof namespace != 'undefined' &&
                serviceName != '' && serviceName != null && typeof serviceName != 'undefined') {
                this.$confirm('此操作将永久删除该服务, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 操作审计
                    this.setAppOperLog();
                    // let param = {
                    //     namespace: row.namespace,
                    //     serviceName: row.serviceName
                    // }
                    let deleteUrl = this.projectConfig.URL_API_APP_MANAGE_APP_SERVICE + '/' + row.namespace + '/' + row.serviceName;
                    // 遮罩开始
                    let loading = this.$loading({ body: true });
                    // 执行删除操作
                    this.httpClient.httpClientDelete(deleteUrl, '').then(res => {
                        // 遮罩结束
                        loading.close();
                        // 刷新数据
                        this.getServiceData();
                        // 重新得到应用基本信息
                        this.getAppBase();
                    })
                }).catch(() => {
                });
            }
        },
        // 服务table行点击事件
        // serviceTableRowClick: function (row, event, column) {
        //     console.log(row)
        // },
        // 取消编辑映射端口
        cancelEditServiceNodePort(row) {
            row.edit = false;
            row.nodePort = row.originalNodePort;
        },
        // 取消编辑映射域名
        cancelEditServiceDomainName(row) {
            row.edit = false;
            row.domainName = row.originalDomainName;
        },
        // 服务修改
        confirmServiceEdit(row) {
            if (row.visible && row.protocol == 'TCP') {
                // 修改tcp,映射的端口
                let nodePort_temp = row.nodePort;
                let reg = /^\+?[1-9][0-9]*$/;
                if (nodePort_temp == '' || nodePort_temp == null && typeof nodePort_temp == undefined) {
                    this.$message({
                        message: '服务:' + row.serviceName + ',映射端口输入为空',
                        type: 'warning'
                    });

                } else if (!reg.test(nodePort_temp)) {
                    this.$message({
                        message: '服务:' + row.serviceName + ',输入的是非法端口',
                        type: 'warning'
                    });
                } else if (nodePort_temp < 5000 || nodePort_temp > 32767) {
                    this.$message({
                        message: '服务:' + row.serviceName + ',输入的端口范围: 5000-32767',
                        type: 'warning'
                    });
                } else if (row.nodePort == row.originalNodePort) {
                    this.$message({
                        message: '服务:' + row.serviceName + ',输入的端口和原来的一样,不需要修改',
                        type: 'warning'
                    });
                } else {
                    // 校验端口是否重复
                    this.httpClient.httpClientget(this.projectConfig.URL_API_APP_MANAGE_APP_SERVICE_NODE_PORT + '/' + row.nodePort, '').then(res => {
                        let code = res.data;
                        if (code == this.projectConfig.CODE_OK) {
                            // 重复
                            this.$message({
                                message: '服务:' + row.serviceName + ',输入映射端口已经存在',
                                type: 'warning'
                            });
                        } else {
                            // 修改
                            let editNodePortParam = {
                                namespace: row.namespace,
                                serviceName: row.serviceName,
                                nodePort: row.nodePort
                            };
                            // 操作审计
                            this.setAppOperLog();
                            // 遮罩开始
                            const loading = this.$loading({ body: true });
                            // 后台修改
                            this.httpClient.httpClientPatch(this.projectConfig.URL_API_APP_MANAGE_APP_SERVICE_NODE_PORT, editNodePortParam).then(res => {
                                // 遮罩结束
                                loading.close();
                                // 重新获取数据
                                this.getServiceData();
                                // 重新得到应用基本信息
                                this.getAppBase();
                            })
                        }

                    })


                }

            } else if (row.visible && row.protocol == 'HTTP') {
                // 修改http,映射的域名
                let domainName_temp = row.domainName;
                if (domainName_temp == '' || domainName_temp == null && typeof domainName_temp == undefined) {
                    this.$message({
                        message: '服务:' + row.serviceName + ',映射域名输入为空',
                        type: 'warning'
                    });

                } else if (!validateDomainName(domainName_temp)) {
                    this.$message({
                        message: '服务:' + row.serviceName + ',输入非法域名: e.g. example.com',
                        type: 'warning'
                    });

                } else if (row.domainName == row.originalDomainName) {
                    this.$message({
                        message: '服务:' + row.serviceName + ',输入的域名和原来的一样,不需要修改',
                        type: 'warning'
                    });
                } else {
                    // 域名重复校验
                    let _param = {
                        domainName: row.domainName
                    };
                    // 后台验证
                    this.httpClient.httpClientget(this.projectConfig.URL_API_APP_MANAGE_DOMAIN_NAME, _param).then(res => {
                        const code = res.data;
                        if (code == this.projectConfig.CODE_OK) {
                            // 重复
                            this.$message({
                                message: '服务:' + row.serviceName + ',输入域名已经存在',
                                type: 'warning'
                            });
                        } else {
                            // 修改
                            let editDomainNameParam = {
                                ingressName: row.ingressName,
                                domainName: row.domainName,
                                namespace: row.namespace,
                                serviceName: row.serviceName
                            };
                            // 操作审计
                            this.setAppOperLog();
                            // 遮罩开始
                            const loading = this.$loading({ body: true });
                            // 后台修改
                            this.httpClient.httpClientPatch(this.projectConfig.URL_API_APP_MANAGE_APP_SERVICE_DOMAIN_NAME, editDomainNameParam)
                                .then(res => {
                                    // 遮罩结束
                                    loading.close();
                                    // 重新获取数据
                                    this.getServiceData();

                                    // 重新得到应用基本信息
                                    this.getAppBase();
                                })

                        }
                    });
                }

            }
        }, // end of 服务修改
        formatCommand() {
            let commandStr = '';
            if (this.appManageBean.command != null && this.appManageBean.command != undefined) {

                this.appManageBean.command.forEach(function(ele) {
                    commandStr += ele;
                });
            }
            console.info(commandStr);
            return commandStr;
        }






    },// end method
    computed: {
        getCurrentNamespace() {
            return this.$store.getters.namespace;
        },
        commandStr: function() {
            let commandStr = '';
            if (this.appManageBean.command != null && this.appManageBean.command != undefined) {
                this.appManageBean.command.forEach(function(ele) {
                    if (commandStr != '') {
                        commandStr += '<br>' + ele;
                    } else {
                        commandStr += ele;
                    }
                });
            }
            return commandStr;
        },
        argsStr: function() {
            let argStr = '';
            if (this.appManageBean.args != null && this.appManageBean.args != undefined) {
                this.appManageBean.args.forEach(function(ele) {
                    if (argStr != '') {
                        argStr += '<br>' + ele;
                    } else {
                        argStr += ele;
                    }
                });
            }
            return argStr;
        }

    },
    watch: {
        getCurrentNamespace(val) {
            this.$router.push({
                path: "/apply/management/app_page"
            });
        }
    }
};
</script>


<style rel="stylesheet/scss" lang="scss">
.el-table .close-row {
    background: #FFFFFF;
}

.el-table .running-row {
    background: #40E0D0;
}

.el-table .error-row {
    background: #FF0000;
}

.create .header {
    width: 100%;
    height: 140px;
    border: 1px solid #eaeaea;
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 0 10px;
    border-radius: 4px;
}

.create .step {
    width: 100%;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}

.create .tabs {
    border: 1px solid #eaeaea;
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 10px 20px;
    border-radius: 4px;
}

.icon_manage {
    width: 110px;
    height: 110px;
    box-shadow: 0px 1px 5px #e8e6e6;
    background: url(../../../assets/images/create.png) no-repeat center center;
    background-size: 48px 48px;
    display: inline-block;
    margin-top: 16px;
    margin-left: 12px;
}

.apply_manage {
    position: absolute;
}

.apply_manage ul,
.manage_time ul {
    list-style: none;
    padding: 0 20px;
}

.apply_manage ul li {
    line-height: 26px;
    font-size: 14px;
}

.create .el-dropdown__icon {
    color: #999;
    margin: 0;
    font-size: 8px;
}

.create .drop {
    margin-top: 4px;
}

.create .serviceAdress {
    width: 864px;
}

.create .serviceAdress ul {
    position: absolute;
    left: 84px;
    top: 130px;
    border: 1px solid #dfe4ed;
    border-radius: 4px;
    padding: 2px;
    height: 65px;
    overflow: auto;
}

.create .serviceAdress ul li {
    float: left;
    margin-right: 6px;
    margin-bottom: 4px;
}

.manage_time {
    position: absolute;
    left: 387px;
    margin-top: 44px;
    font-size: 13px;
}

.manage_form .el-textarea__inner {
    width: 300px;
}

.manage_form {
    float: right;
    margin-right: 14px;
    margin-top: 0px;
}

.create .drop .el-button {
    padding: 8px;
}

.create .el-dialog .el-button {
    padding: 9px 6px;
}

.create .el-table .running-row {
    background: #fafcfe;
}

.manage_form .edit {
    position: absolute;
    top: 48px;
    right: 37px;
}

.manage_form .el-form-item {
    margin-bottom: 6px !important;
}

.manage_form .btn {
    position: absolute;
    top: 48px;
    right: 37px;
}

.create .el-slider--with-input {
    position: absolute;
    width: 97%;
    right: 0;
    top: 0;
}

.create .el-input-number__decrease {
    border-right: 1px solid #bfcbd9;
}

.create .el-input--small .el-input__inner {
    padding-right: 0;
    text-align: center;
}

.create .el-input-number__increase {
    border-right: 1px solid #bfcbd9;
}

.create .el-slider__input {
    margin-right: 20px;
}

.create .el-form-item__content .num {
    float: right;
}

.create .el-table th>.cell {
    padding: 0 18px;
    /*text-align:left;*/
}




































/*.create .el-table td, .create .el-table th.is-leaf{*/


/*text-align: left;*/


/*}*/

.create .el-icon-minus:before,
.create .el-icon-circle-plus-outline:before,
.create .icon-tanxingshensuo:before,
.create .icon-banbenshengji:before,
.create .el-icon-plus:before,
.create .icon-peizhiguanli:before,
.create .el-icon-arrow-up:before,
.create .el-icon-edit:before,
.create .icon-xitongbushu:before,
.create .el-icon-share:before,
.create .el-icon-delete:before {
    padding-right: 4px;
}

.create .el-date-editor--datetimerange {
    border: 1px solid #eaeaea;
    border-radius: 4px;
}

.create .el-table__header-wrapper {
    border-bottom: none;
}

.create .el-input__inner {
    padding: 8px 0;
}

.create .el-dialog .cell .HTTP,
.create .el-dialog .cell .TCP {
    width: 90px;
}

.create .el-dialog .el-input__inner {
    padding: 15px 0;
}

.create .line {
    margin-top: 13px;
    float: left;
    width: 3px;
    height: 17px;
    margin-right: 10px;
    border-left: 3px solid #00a1ea;
}

.create .Title {
    font-size: 15px;
}


@media screen and (max-width: 1366px) {
    .create .el-dialog .cell .HTTP,
    .create .el-dialog .cell .TCP {
        width: 70px;
    }
}
</style>
